title: google maps v3 - Add markers after ajax call completes
body: <p>I am trying to load markers on Google map using ajax call. The ajax call is taking long time but the map is loading before the ajax call is completed. So I don't see markers on the map.   </p>
  
  <p>Code given below:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var map;
  function initialize() {
      var myLatlng;
      var mapOptions;     
      myLatlng = new google.maps.LatLng("29.9844", "-95.33389");
      mapOptions = {
                  zoom: 12,   
                  center: myLatlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP };
  
     map = new google.maps.Map(
     document.getElementById("map-canvas"), mapOptions);
   google.maps.event.addListenerOnce(map, 'idle', function() {
           getRegions( function( result ) {
              alert("getRegions callback return value : " +  result.regionList );
            addMarkersAtRegionCenter(result );
          });
      });
  }
  &lt;/script&gt;
  function addMarkersAtRegionCenter(result) {
      var length = result.regionList.length;
       for(var i=0; i&lt;length; i++)
       {
          var image = result.regionList[i].imageIcon;
          var marker = new google.maps.Marker({
          position: new google.maps.LatLng(result.regionList[i].centerLatitude,result.regionList[i].centerLongitude),
                    icon: image,
                    map: map
  });
  
  google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() {
                      window.location.href = marker.url;
                 }
               })(marker, i));
       }
   }
  function getRegions(regions, callbackRegions) {
    $.ajax({
          type : 'POST',
          url : 'getRegions.jsp',
          data : {regions: regions},
          dataType: "json",
          success : function(result, textStatus, jqXHR) {
              // invoke the callback function here
                 callbackRegions(result);
           },
          error: function (result, textStatus, errorThrown) {
              // invoke the callback function here
                 callbackRegions(result);
          }
   });
  }
  </code></pre>
  
  <p>I am getting response from the server which i can see in the browser. I am giving the response below:</p>
  
  <blockquote>
    <p>{"regionList":[{"centerLongitude":-95.34890747070312,"imageIcon":"../images/untested-icon.png","centerLatitude":29.980682373046875},{"centerLongitude":-95.34890747070312,"imageIcon":"../images/untested-icon.png","centerLatitude":29.988117218017578},{"centerLongitude":-95.33389282226562,"imageIcon":"../images/untested-icon.png","centerLatitude":29.980682373046875},{"centerLongitude":-95.33389282226562,"imageIcon":"../images/untested-icon.png","centerLatitude":29.988117218017578}]}</p>
  </blockquote>
  
  <p>But I am not able to get that response in the alert message in the above code. Any idea what's the issue here? </p>
  
  <p>I would appreciate your help.</p>