javascript return function undefined using googlemap API Asynchronous Load

Question

google map api is loaded asynchroneously

   jQuery(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
   script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
        document.body.appendChild(script);
});

i then do

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);



    var address ="Marseille";

   var geocoder;
   geocoder = new google.maps.Geocoder();
   var markers;
    markers=  geocoder.geocode( { 'address': address}, function(results, status) {
           if (status == google.maps.GeocoderStatus.OK) {               
               var titlelatlong=[address,results[0].geometry.location.lat(),results[0].geometry.location.lng()];                    
              console.log(titlelatlong);    
              return titlelatlong;
             }
      }); 

       console.log(markers);

why

 console.log(titlelatlong)

output is what i want and

console.log(markers)

is undefined ?

how can i fix this ?

Daniel B · Answer 1 · 2015-10-21T15:37:12.113

1

geocoder.geocode() is an asynchronous function, while your javascript executes synchronously.

The asynchronous function geocoder.geocode() will be called, and then your console.log(markers) will be executed, whether or not the previous asynchronous function has finished or not.

Either, assign the variable value in your callback, or use a promise library to wrap your asynchronous code to make it behave like synchronous code.

var markers;
geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {               
        var titlelatlong=[address,results[0].geometry.location.lat(),results[0].geometry.location.lng()];                    
        markers = titlelatlong; //assign value to variable
        console.log(markers);
    }
});

edited Oct 21 '15 at 15:37

answered Oct 21 '15 at 14:25

Daniel B

8,770
5
43
76

could u show me how to assign the variable value in my callback in my example ? – Matoeil Oct 21 '15 at 15:19
That's what I'm doing with `markers = titleatlong...`! =) – Daniel B Oct 21 '15 at 15:37
@DanielB where do you make new google.maps.LatLng() for marker – Techy Dec 10 '15 at 16:15
@DanielB Kindly help me to solve my question http://stackoverflow.com/questions/34205383/make-geocoder-to-call-synchronously – Techy Dec 10 '15 at 16:22

score 1 · Answer 2 · answered Oct 21 '15 at 14:27

The Google Maps Geocoding API is asynchronous, which means that assigning marker to geocoder.geocode() will be undefined since the method itself returns nothing.

What geocoder.geocode() provides is to consume a callback function which it will call once it finishes running. The Geocoding API will pass data to the callback that you defined, and from there you can obtain the information you need, like the console.log(titlelatlong) you printed out.

javascript return function undefined using googlemap API Asynchronous Load

2 Answers2