google maps - make geocoder to call synchronously

Question

I have two hidden fields which contain latitude value values and longitude values having id-#latitude_val and #longitude_val.I will set variable chicago with a initial latitude and longitude.If above two fields are null,I will pass the place name (here statically for checking )and locate the marker by the following code.

function initialize() { 
  chicago = new google.maps.LatLng(51.508742,-0.120850);//default value
  if(($("#latitude_val").val().length >3) ||   ($("#longitude_val").val().length>3))
   {
   chicago =  new google.maps.LatLng($("#latitude_val").val(), $("#longitude_val").val());  
    }
  else
    { 
  geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': 'Abudhabi'}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK)
      {  
       console.log(results[0].geometry.location.lat()+' '+results[0].geometry.location.lng());//if null this should print first
       chicago = new google.maps.LatLng(results[0].geometry.location.lat(),results[0].geometry.location.lng()); 
      console.log('__'+chicago);//this should print second    
      }
      else
      {
          console.log("Geocode was not successful for the following reason: " + status);
      }  
      }); 
   }
   console.log('****'+chicago);//this should print third
   var mapOptions = { zoom:4, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago }
   map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);  
   var marker=new google.maps.Marker({
    position:chicago,
    map:map,
   draggable:true,
   animation: google.maps.Animation.DROP
   });

   marker.setMap(map);
   });
 }

I have checked the value of chicago in cases.Here the default value is marked by the marker in the map.When I check console,the third one is printing first,the first one in second and second one in third.I didnt understand why this happens.I need to run this based on the order.

The map is showing with values (51.508742,-0.120850) rather than the new values

Answer 1

So, I guess you might populate said inputs from the backend, and provide a fallback in case they are null. Either way, you want to get a location and only then you want to instance your map.

The following should work:

var map;
function initialize() {

  var createMapWithLocation=function(myposition) {
    var mapOptions = {
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: myposition
      },
      mymap = new google.maps.Map(document.getElementById("googlemap"), mapOptions),
      marker = new google.maps.Marker({
        position: myposition,
        map: mymap,
        draggable: true,
        animation: google.maps.Animation.DROP
      });
      console.log('****' + myposition); //this should print third
    return mymap;
  };

  var chicago = new google.maps.LatLng(51.508742, -0.120850); //default value
  if (($("#latitude_val").val().length > 3) || ($("#longitude_val").val().length > 3)) {
    chicago = new google.maps.LatLng($("#latitude_val").val(), $("#longitude_val").val());
    map = createMapWithLocation(chicago);
  } else {
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({
      'address': 'Abudhabi'
    }, function (results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        console.log(results[0].geometry.location.lat() + ' ' + results[0].geometry.location.lng()); //if null this should print first
        chicago = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
        console.log('__' + chicago); //this should print second 
         map = createMapWithLocation(chicago);  
      } else {
        console.log("Geocode was not successful for the following reason: " + status);
      }
    });
  }
}

You decide when to call createMapWithLocation. It will be synchronous if the inputs are populated, and asynchronous if they aren't. Either way, you don't need to know the position of chicago beforehand.

Please note I've declared map outside of the initialize function, just in case you want to inspect it from the console.