using google map geocoder.geocode before initializing the map

Question

I have created a nice Google map form that gets clients data from the database ( with a jQuery post call to php) and loads it into the clients_details. if clients_details[]['location'] which is Latlng is provided in the database all works well and marker gets displayed as expected. Problem is that when clients_details[]['location'] is not provided then I use the address from clients_details[]['address'] and try to get position of the marker by using geocoder.geocode. However surprisingly every time the code gets to the geocoder it jumps from it and comes back to it after it initialized the map ! so markers wont get added to the map !

I am assuming it has something to do with JavaScript function priorities but not sure how

<script>
var clients_details // getting this from database;
var infowindow =[];
var geocoder;
var map;
 function showMarkers(clients_details)
 {

   var marker = [];
   for (var i = 0; i < clients_details.length; i++)
   {

       content = 'Test Content' ;
       infowindow[i] = new google.maps.InfoWindow({
           content: content,
           maxWidth: 350
       });           

       var client_location;
       if (clients_details[i]['location'] !== null)
       {
       // Geting Lat and Lng from the database string
       LatLng = clients_details[i]['location'];           
       client_location = new google.maps.LatLng (LatLng);           
       }
       else
       {            
         client_address = clients_details[i]['address'];
         geocoder.geocode(
           { 'address': client_address},
           function(results, status)
           {                 
             if (status == google.maps.GeocoderStatus.OK)
             {
               client_location = results[0].geometry.location;
             }
             else
               alert('Geocode was not successful for the following\n\
                      reason: ' + clients_details[i]['name']+'\n' + status);
           });

         }
         marker[i] = new google.maps.Marker({
           position: client_location,
           map: map,               
           title: clients_details[i]['name']
       });


       // Add 'click' event listener to the marker
       addListenerMarkerList(infowindow[i], map, marker[i]);

   }// for
 }// function

Answer 1

The

marker[i] = new google.maps.Marker({
       position: client_location,
       map: map,               
       title: clients_details[i]['name']
});

Code should be inside the callback in the geocoder.geocode call. Because in your code the client_location is computed after the marker[i] . What you could do is:

compute the client_location and when the client_locolation is computed
then compute the marker[i]

So your code could be like this:

// ... your code as is
geocoder.geocode(
    { 'address': client_address},
    function(results, status)
    {                 
        if (status == google.maps.GeocoderStatus.OK)
        {
            client_location = results[0].geometry.location;

            // closure needed, for the marker[i] to work correctly, 
            // because we are in a loop on i
            (function (i) {
                marker[i] = new google.maps.Marker({
                    position: client_location,
                    map: map,               
                    title: clients_details[i]['name']
                });
            })(i);

        }
        else
        {
            alert('Geocode was not successful for the following\n\
                  reason: ' + clients_details[i]['name']+'\n' + status);
        }
    }
);
// .... your code as is

Answer 2

You need to bind your call back function to the right event. Bind the initialize of the map to window load. Inside that function then call the rest of the marker/geocoder logic. As extracted from their documentation:

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-25.363882, 131.044922)
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    title: 'Click to zoom'
  });

  google.maps.event.addListener(map, 'center_changed', function() {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(function() {
      map.panTo(marker.getPosition());
    }, 3000);
  });

  google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(8);
    map.setCenter(marker.getPosition());
  });
}

google.maps.event.addDomListener(window, 'load', initialize);