title: How to perform Ajax call first to get lat/lng and then load Google maps with markers?
body: <p>I am doing an ajax call to retrieve the lat and lng of stores locations stored in sql database. This is my ajax call and returns the json object of all lats and lngs.</p>
  
  <pre><code>$.ajax({
          type:"GET",
          dataType:"json",
          url:"&lt;?php echo site_url("sandbox_faizan/get_coordinates") ?&gt;",
          success: function(result)
          {
              my_arr = result;
  
            for(var i=0;i&lt;result.length;i++)
             {
                 store_points(result[i].lat,result[i].lng)
             }
      });
  </code></pre>
  
  <p>Now I have stored this json object in my own array object that will be used to add markers on map. This is done here before the map is loaded.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var point=[];
  point = [
      new google.maps.LatLng(37.569309, -122.32617500000003)
  ];
  function store_points(lat,lng)
  {
      //used to show markers
  
      point = [
          new google.maps.LatLng(lat,lng)
      ];
  }
          var map;
          var mapOptions = {
              center: new google.maps.LatLng(51.3, -1.80),
              zoom: 6,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_xpin_letter_withshadow&amp;chld=pin_star|%E2%80%A2|CC3300|000000|FF9900", new google.maps.Size(70, 83), new google.maps.Point(0, 0), new google.maps.Point(10, 34));
          var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow", new google.maps.Size(89, 85), new google.maps.Point(0, 0), new google.maps.Point(12, 35));
  
  
  
          function initialize() {
  
              map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  
              for (var i = 0; i &lt; point.length; i++) {
                  var marker = new MarkerWithLabel({
                      map: map,
                      position: point[i],
                      icon: pinImage,
                      shadow: pinShadow,
                      labelContent: count,
                      labelAnchor: new google.maps.Point(12, -5),
                      labelClass: "labels"
                  });
              }
          }
          google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>
  
  <p></p>
  
  <p>My problem is that the map is loaded on window load (as seen in last line of code) but my ajax call is performed later, so points array never populates.
  How can I force the ajax call to get first the lat and lng and populate the points array and then Load map with the markers info from the points array.</p>