Question

Ok, I’m fooling around with Google Maps API v3 and I bumped into a problem. I don’t know if its the API or just some JS error i made.

Problem:
addMarkerFromAdress() function calls on geocodeFromAdress() which returns coordinates back to addMarkerFromAdress(). But returned value is “undefined“.

As a debug i added two alert outputs, one in addMarkerFromAdress() and one in geocodeFromAdress(). What troubles me is that the alert() in addMarkerFromAdress() seems to fire off before any value is returned. Why?

Source:

<script type="text/javascript">
  var geocoder;
  var map;

  function initializeGoogleMaps() {

    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(0, 0);
    var myOptions = {
      zoom: 1,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  }

  function geocodeFromAdress(address) {
   geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var latLng = results[0].geometry.location;
        alert(latLng); //Outputs coordinates, but is for some reason outputted 2nd
        return latLng;
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

  function addMarkerFromAdress(address, title){

    var latLng = geocodeFromAdress(address); 
    alert(latLng); //Outputs "undefined", but is for some reason outputted 1st
    map.setCenter(latLng);
        var marker = new google.maps.Marker({
            map: map, 
            position: latLng
    });

  }

  window.onload = function () { 
   initializeGoogleMaps();
   addMarkerFromAdress('Berlin, Germany', 'Berlin');
  }
</script>

Answer 1

See that function passed as the second argument to geocoder.geocode()? that is where you should be calling addMarkerFromAddress. Due to the asynchronous nature of the geocode request, the alert after var latLng = geocodeFromAdress(address); is firing before the response is returned with the lat long values.

Something like this should do it

<script type="text/javascript">
  var geocoder;
  var map;

  function initializeGoogleMaps() {

    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(0, 0);
    var myOptions = {
      zoom: 1,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  }

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

  function addMarkerFromAdress(latLng, title){
    map.setCenter(latLng);
    var marker = new google.maps.Marker({
        map: map, 
        position: latLng
    });   
  }

  window.onload = function () { 
   initializeGoogleMaps();
   geocodeFromAdress('Berlin, Germany', 'Berlin');
  }
</script>