CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
ChrisBratherton
ChrisBratherton

Reputation: 1590

Google Maps API v3, Geolocation not returning correctly

I have an issue where if I put the result of the Geoencoding into a variable, the variable returns empty. Here is my code:

Map Init: 

function init_map() {
  geocoder = new google.maps.Geocoder();

  var center_address = get_long_lat("Salisbury, UK");
  var latlng = new google.maps.LatLng(center_address);

  var mapOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("gmap"), mapOptions);
}

As you can see I am trying to get the center of map to my hometown by converting an address to Long and Lat using a custom function get_long_lat:

Get Long & Lat

function get_long_lat(address) {

      var result = "";

      geocoder.geocode( { 'address': address, 'region': 'uk' }, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
              result = results[0].geometry.location;
          } else {
            result = "Unable to find address: " + status;
          }
      });

      return result;
  }

Now, result returns as an empty string. But if i was to display an alert of results[0].geometry.location it displays the correct value, that I am expecting?

Why does it not want to return this value?

Upvotes: 1

Views: 408

Answers (2)

Mathijs Flietstra
Mathijs Flietstra

Reputation: 12974

geocoder.geocode( { 'address': address, 'region': 'uk' }, function(results, status) {});

This bit of code does a call to the Google servers to retrieve the geocode information. After it receives a response from the Google servers, it executes the callback function specified.

return result;

This line is hit before the callback function has retrieved the information, so result is still empty. When the information is retrieved, the callback function is called and result is populated. But it is too late, the "get_long_lat" function has already returned its result, which was still empty at the time of returning.

The problem is that the callback function that returns the result is running asynchronously.

It would work if you wrote it this way:

function init_map() {
  geocoder = new google.maps.Geocoder();

  geocoder.geocode( { 'address': 'Salisbury, UK', 'region': 'uk' }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {

        var mapOptions = {
          zoom: 8,
          center: results[0].geometry.location,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        map = new google.maps.Map(document.getElementById("gmap"), mapOptions);

      } else {
        //Do whatever you want to do when the address isn't found.
        //result = "Unable to find address: " + status;
      }
  });

}

Now the mapOptions are only initialized after the Google servers have returned their response.

Upvotes: 0

user788472
user788472

Reputation:

The geocoder is asynchronous. You can't return results from asynchronous functions. You should use the result value inside of the callback.

To be more specific, what's happening is your return result; line is actually executing before the result variable is assigned.

Upvotes: 2

Related Questions