How to perform Ajax call first to get lat/lng and then load Google maps with markers?

Question

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.

$.ajax({
        type:"GET",
        dataType:"json",
        url:"<?php echo site_url("sandbox_faizan/get_coordinates") ?>",
        success: function(result)
        {
            my_arr = result;

          for(var i=0;i<result.length;i++)
           {
               store_points(result[i].lat,result[i].lng)
           }
    });

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.

<script type="text/javascript">
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&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 < 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);

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.

Answer 1

You have two separate asynchronous events:

1. map initializtion on the page load event
2. ajax return of data for markers

one option is to create a single function that displays the markers once the map is initialized, call it both at the end of the map initialization and the ajax success function, then the order doesn't matter, when both have occurred the markers will be displayed on the map.

variables in the global scope:

var points = [];
var map = null;

AJAX:

$.ajax({
        type:"GET",
        dataType:"json",
        url:"<?php echo site_url("sandbox_faizan/get_coordinates") ?>",
        success: function(result) 
        {
          for(var i=0;i<result.length;i++) 
          {
            points.push(new google.maps.LatLng(result[i].lat,result[i].lng));
          }
          addMarkers();
        }
       });

initialization:

    function initialize() {
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        addMarkers();
    }
    google.maps.event.addDomListener(window, 'load', initialize);

add markers to the map:

 function addMarkers() {
    // when the map is initialized and the points have been initialized, add them to the map
    if ((map != null) && (points.length > 0)) {
       for (var i = 0; i < points.length; i++) {
          var marker = new MarkerWithLabel({
              map: map,
              position: points[i],
              icon: pinImage,
              shadow: pinShadow,
              labelContent: count,
              labelAnchor: new google.maps.Point(12, -5),
              labelClass: "labels"
          });
       }
    }
 }