Google Maps API-results.geometry.location [0]返回null

Question

fairly new to javascript and trying to make a simple map application. I am trying to center a new map around an address that is passed through a function. The issue I have is it is always being returned null which I do not understand, do I have to specify return types in the function format?

My code:

 <script>

 var geocoder;
 var map;
 function initialize() {
  var address = document.getElementById('address').value;
  var latlng = GetLatLong(address);
  alert(latlng);
  var mapOptions = {
    zoom: 8,
    center: latlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function GetLatLong(address) {
   var geocoder = new google.maps.Geocoder();
   geocoder.geocode( { 'address': address}, function(results, status) {
   if (status == google.maps.GeocoderStatus.OK) {
     alert(results[0].geometry.location)
     return results[0].geometry.location;
   } else {
     alert('Geocode was not successful for the following reason: ' + status);
   }
 });
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

I have a div for the address text and a div for the map location. To debug I put alert("") in some places to see the order in which it gets called on runtime, why would the line I put the first alert be called before the function is called?

Thanks

Answer 1

The Google Maps API call that you are performing is asynchronous. In layman's terms that means that as soon as you start the call, the rest of your program keeps executing independent of it. It is essentially running to the side of the rest of your program. The purpose of the function that you pass to the geocoder call is to deal with the data that the call returns asynchronously.

You would need to change your code to do something like this:

function initialize() {
  var address = document.getElementById('address').value;
  GetLatLong(address);
}

var map;
function GetLatLong(address) {
   var geocoder = new google.maps.Geocoder();
   geocoder.geocode( { 'address': address}, function(results, status) {
   if (status == google.maps.GeocoderStatus.OK) {
     alert(results[0].geometry.location)
     var latlng = results[0].geometry.location;
     var mapOptions = {
       zoom: 8,
       center: latlng
     };
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
   } else {
     alert('Geocode was not successful for the following reason: ' + status);
   }
 });
}