Question

First off thank you in advance for taking time to help me with this, I appreciate your efforts.

I have a problem with google maps api, JavaScript version 3.

I have written the following code

    $('.adr').ready(function(){    

    initialize();

})

function initialize() {

    var myLatlng = codeAddress();

    var myOptions = {
      zoom: 14,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    };

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

  }

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

    var address;
    var street = cropAdr($(".street-address").text());
    var city = cropAdr($(".locality").text());
    var state = cropAdr($(".region").text());
    var zip = cropAdr($(".zip").text()); 

    address = street + ", " + city + ", " + state + ", " + zip;    

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

      if (status == google.maps.GeocoderStatus.OK) 
      {
        var latlng = results[0].geometry.location;
        return latlng;
      }  
      else 
      {
        alert("Geocode was not successful for the following reason: " + status);        
        return null;
      }

    });
}



function cropAdr(args)
{
  var index = args.indexOf(":");
  var value = args.substr(index+1);

  return value;
}

But it doesn’t work.

I have checked the value of the “results[0].geometry.location” return and its perfect, so the address manipulation works. The “results[0].geometry.location” is a google.maps.Latlng object, but I have tried to strip out just the co-ords as strings, then create a new google.maps.Latlng object but no dice.

yet if I manually copy that string and paste the value into “var myLatlng = new google.maps.Latlng(Paste Copied String here!)” the whole thing works!!

I cannot see what else is wrong this script (apologies for the jumble of Jquery and Javascritpt).

Answer 1

The Google Maps API Geocoder accepts a function that will be run when the address has been geocoded, but that function may be called asynchronously – that is, after the rest of your code has already finished running.

In codeAddress you call the Geocoder and pass in a function with this line:

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

You then try and return a latLng from the function passed to the geocoder, but that is not the same as returning a value from codeAddress. The value you return from inside this function will be passed to the geocoder object, which will just ignore it.

You need to have the function you pass to geocode do something with the latLng. For example, replace:

return latLng;

with:

map.setCenter(latLng);

And the map should center itself on the geocoded address once the result is available.

(To do this you will need to make the map object global or otherwise make it available to codeAddress. I suggest adding “var map;” at the top of your code, and remove “var” from in front of the use of map in initialize)