Google geocoder does not run. Cannot understand why?

Question

Please note, the arguments 'origin' and 'destination' are both objects of type google.maps.LatLng.

I am trying to reverse-geocode these LatLng objects in order to obtain and return formatted addresses.

The function simply assigns 'undefined' to 'geocodedOrigin' and 'geocodedDestination'. I would like to know why the geocoder is not working? Thanks.

    function geocodeLocations(origin, destination)
    {
         var geocoder = new google.maps.Geocoder();
         var geocodedOrigin;
         var geocodedDestination;
         var geocodedLocations;


         geocoder.geocode({'location': origin}, function(results, status) {

                if (status === google.maps.GeocoderStatus.OK) {

                  if (results[1]) {

                    geocodedOrigin = results[1].formatted_address;
                  } 
                  else {                            
                    geocodedOrigin = 'No results found';
                  }
                } 
                else {                        
                  geocodedOrigin = 'Geocoder failed due to: ' + status;
                }
            });

          geocoder.geocode({'location': destination}, function(results, status) {

                if (status === google.maps.GeocoderStatus.OK) {
                  if (results[1]) {

                    geocodedDestination = results[1].formatted_address;

                  } 
                  else {
                    geocodedDestination = 'No results found';
                  }
                } 
                else {
                  geocodedDestination = 'Geocoder failed due to: ' + status;
                }
          });

          geocodedLocations = [geocodedOrigin, geocodedDestination];

          return geocodedLocations;
    }

Answer 1

The geocoder is asynchronous. It is working fine, the results come back in the callback after you have returned the array containing them.

You need to use the data returned by the geocoder inside the callback function where it is available.

proof of concept fiddle

code snippet:

var geocoder;
var map;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  geocodeLocations(
    new google.maps.LatLng(40.7127837, -74.0059413),
    new google.maps.LatLng(40.735657, -74.1723667));

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

function geocodeLocations(origin, destination) {
  var geocoder = new google.maps.Geocoder();
  var geocoder2 = new google.maps.Geocoder();
  var geocodedOrigin;
  var geocodedDestination;
  var geocodedLocations;
  var bounds = new google.maps.LatLngBounds();


  geocoder.geocode({
    'location': origin
  }, function(results, status) {

    if (status === google.maps.GeocoderStatus.OK) {

      if (results[1]) {

        geocodedOrigin = results[1].formatted_address;
        var marker = new google.maps.Marker({
          position: results[1].geometry.location,
          map: map
        });
        bounds.extend(marker.getPosition());
        map.fitBounds(bounds);
        document.getElementById('origin').innerHTML = "origin=" + geocodedOrigin;
      } else {
        geocodedOrigin = 'No results found';
      }
    } else {
      geocodedOrigin = 'Geocoder failed due to: ' + status;
    }
  });

  geocoder2.geocode({
    'location': destination
  }, function(results, status) {

    if (status === google.maps.GeocoderStatus.OK) {
      if (results[1]) {

        geocodedDestination = results[1].formatted_address;
        var marker = new google.maps.Marker({
          position: results[1].geometry.location,
          map: map
        });
        bounds.extend(marker.getPosition());
        map.fitBounds(bounds);
        document.getElementById('destination').innerHTML = "destination=" + geocodedDestination;
      } else {
        geocodedDestination = 'No results found';
      }
    } else {
      geocodedDestination = 'Geocoder failed due to: ' + status;
    }
  });

}

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="origin"></div>
<div id="destination"></div>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>