Error with google maps api3

Question

I am trying to embed a google map with markers in my webpage. But I am getting an undefined alert message if I use the following code

var infowindow = null;
var geocoder;
$(document).ready(function () { initialize();  });

function codeAddress(address) {
    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);
        } 
    });
}

function initialize() {
    default_location = codeAddress("<?php echo $location;?>");
    alert(default_location);
}

Instead of that If i am doing the alert with in the codeAdress function as below it is correctly showing the latitude and longitude.

var infowindow = null;
var geocoder;
$(document).ready(function () { initialize();  });

function codeAddress(address) {
    geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            alert(results[0].geometry.location);

        } 
    });
}

function initialize() {
    codeAddress("<?php echo $location;?>");
}

Can somebody Identify whats the problem? I am new to javascripts

Answer 1

The geocoder call is asynchronous, meaning that it takes some time to return and does not follow the sequential order as written. It also means that in the first bit, the function finishes before it gets to your return (results[0].geometry.location) statement. So alert has nothing to display.

Other than inserting statements inside the geocode request, you can write a callback pattern to separate the script logic. The callback, which passes the location as the parameter, executes when the geocode call is successful.

http://jsfiddle.net/3KXKm/

  var infowindow = null;
  var geocoder = new google.maps.Geocoder();

  $(document).ready(function () { initialize();  });

  function codeAddress(address, callback) {
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        callback(results[0].geometry.location);
      } 
    });
  }

  function initialize() {
    codeAddress("Chicago, IL", function(default_location) {
      var map = new google.maps.Map(document.getElementById("map_canvas"),
        { center: default_location,
        zoom: 3, mapTypeId: google.maps.MapTypeId.ROADMAP });

      locations = ["Los Angeles", "Davis", "Truth or Consequences",
        "Ann Arbor", "Massachusetts"];

      for (var i = 0; i < locations.length; i++) {
        codeAddress(locations[i], function(latLng) {
          new google.maps.Marker({map:map, position:latLng});
        });
      }
    });
  }

Answer 2

geocode does not return the result instantly. This is why you get nothing in the first version of your code. So if you want to do something with the geocode result you should do it in the callback function like in the second version of your code.

Answer 3

Your

return (results[0].geography.location);

Only return the value of the nested function, not that of codeAddress function. Maybe if hou tell us what you're trying to do we can help.