Google Maps API gives ReferenceError google is not defined

Question

I’m using Google maps to save the maker to my database. And firebug is showing ReferenceError: google is not defined error. However the map is showing up but submit button doesn’t seems to be working. Here is my code.

<script async defer src="https://maps.googleapis.com/maps/api/js?key=<?php echo $googlemapkey;?>&callback=initialize" type="text/javascript"></script>

<script>
  // Ajax / upload part
$(document).ready(function() {
  // initialize Google Maps
  initialize();
  // save marker to database
  $('#submitButton').click(function() {
    // we read the position of the marker and send it via AJAX
    var position = marker.getPosition();
    $.ajax({
      url: 'update_map.php',
      type: 'post',
      data: {
        lat: position.lat(),
        lng: position.lng(),
        id : <?php echo $id;?>
      },
      success: function(response) {
        // we print the INSERT query to #display
        $('#output').html(response);
      }
    });
  });

});

//Google Maps part
var map = null;
var marker = null;

// Google Maps
function initialize() {
  var startDragPosition = null;
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(<?php echo $lat;?>, <?php echo $long;?>),  // Over Belgium
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map = new google.maps.Map(document.getElementById('map-big'), mapOptions);
  // set the new marker
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(<?php echo $lat;?>, <?php echo $long;?>),
    map: map,
    draggable: true
  });

  var myGeocoder = new google.maps.Geocoder();

  // set a callback for the start and end of dragging
  google.maps.event.addListener(marker,'dragstart',function(event) {
    // we remember the position from which the marker started.  
    // If the marker is dropped in an other country, we will set the marker back to this position
    startDragPosition = marker.getPosition();
  });
  google.maps.event.addListener(marker,'dragend',function(event) {
    // now we have to see if the country is the right country.  
    myGeocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK && results[1]) {
        var countryMarker = addresComponent('country', results[1], true);

      }
      else {
        // geocoder didn't find anything.  So let's presume the position is invalid
        marker.setPosition(startDragPosition);
      }
    });
  });
}

function addresComponent(type, geocodeResponse, shortName) {
  for(var i=0; i < geocodeResponse.address_components.length; i++) {
    for (var j=0; j < geocodeResponse.address_components[i].types.length; j++) {
      if (geocodeResponse.address_components[i].types[j] == type) {
        if (shortName) {
          return geocodeResponse.address_components[i].short_name;
        }
        else {
          return geocodeResponse.address_components[i].long_name;
        }
      }
    }
  }
  return '';
}
</script>

This code use to work before i start using API key. Also i put google api code before jquery still the same error.

Could someone point me how to fix this? Appreciate your time.

Answer 1

Don't use initialize() function on $(document).ready. Remove it. initialize() function will be automatically called when google API will send callback.

Now document loads up but doesn't have time to get info from Google API and shoots initialize function before you get info from Google.