Google Maps API doesn't display map if the center is populated by a javascript function

Question

So, when I do this:

<!-- javascript file -->
function geocodeFromAdress(address) {
  geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        var latLng = results[0].geometry.location;
        console.log(latLng.lat() + ", " + latLng.lng());
        return latLng.lat() + ", " + latLng.lng();
    } else {
        alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

<!-- HTML view -->
  <script type="text/javascript">
  $(function(){
    myOptions = {
      center: new google.maps.LatLng(geocodeFromAdress('Los Angeles')),
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    Gmaps.map = new google.maps.Map($('.map')[0], myOptions); 
    addFacilities(Gmaps.map);
  });
  </script>

the map is not rendered, but if I do:

  <script type="text/javascript">
  $(function(){
    myOptions = {
      center: new google.maps.LatLng(34.0522342, -118.2436849),
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    Gmaps.map = new google.maps.Map($('.map')[0], myOptions); 
    addFacilities(Gmaps.map);
  });
  </script>

then the maps is properly rendered. Why it doesn't accept the coordinations from the JS function?

The output of the JS function: 34.0522342, -118.2436849

Thank you in advance.

Is the map trying to render before the geocoding function has completed? Maybe call the geocoding function before initializing the map. — sideroxylon, Mar 06 '15 at 10:08
Hmm.. that might be the reason. But - how to render the map ONCE the coordinates are calculated? — user984621, Mar 06 '15 at 10:13
You can save the coordinates as a global variable and then use the variable for `center:` — sideroxylon, Mar 06 '15 at 10:19
The geocoder is asynchronous, you can't return the results of the operation, you have to use them in the callback function. — geocodezip, Mar 06 '15 at 15:04
possible duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — geocodezip, Mar 06 '15 at 15:20

score 0 · Answer 1 · answered Mar 06 '15 at 10:45

The map does not reder beacause center in mapOptions need a value but when you made this:

center: new google.maps.LatLng(geocodeFromAdress('Los Angeles'))

the return from geocodeFromAdress('Los Angeles') is undefined, so there is no value to pass to google.maps.LatLng function.

You can give a center temporarly and then set the center when the geocoder returns :

function geocodeFromAdress(address) {
  geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        var latLng = results[0].geometry.location;
        console.log(latLng.lat() + ", " + latLng.lng());
        Gmaps.map.setCenter(latLng);
    } else {
        alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

Or initialize the map when geocoder returns :

function geocodeFromAdress(address) {
  geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        var latLng = results[0].geometry.location;
        console.log(latLng.lat() + ", " + latLng.lng());
       myOptions = {
      center: new google.maps.LatLng(latLng),
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    Gmaps.map = new google.maps.Map($('.map')[0], myOptions); 
    } else {
        alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

Google Maps API doesn't display map if the center is populated by a javascript function

1 Answers1