Question

I’m trying to use Google geocoder service to get the coordinates of cities input by the user. However looks like there’s some problem initializing the LatLng() object (latlngCity), and the map won’t show up. The code is as following:

var map;
var latlngCity;

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


  var myMapOptions = {
      zoom: 8,
      center: latlngCity,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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

For simplicity, I’m inserting the address city string myself. Variables map and latlngCity are globals. Is there anything wrong with this code?
Thanks very much.

Answer 1

You need to move the map creation code into the geocode callback (or alternatively create the map with some default position and then re-center the map inside the callback).

In your code, latlngCity is undefined by the time of map creation while geocode is still being executed (asynchronously).

Hope this makes sense. Otherwise I’ll provide some code. Let me know.