populating google maps markers using ajax

Question

I'm trying to put about 120 marker on a Google Map using ajax populated array of google.maps.LatLng objects

here's my script

<script type ="text/javascript">
    $.ajaxSetup({
        cache: false
    });




    var gMapsLoaded = false;
    var latlng = [];
    var returnValue;
    var marker;
    var xmlDoc;


    $.ajax({
        type: "POST",
        url: "map.aspx/getLatLng",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            xmlDoc = $.parseXML(response.d);
            $(xmlDoc).find("Table").each(function () {
                latlng.push(new google.maps.LatLng($(this).find("lat").text(), $(this).find("lng").text()));
            });
            //alert(latlng.length.toString());
        },
        failure: function (response) {
            alert(response.d);
        },
        error: function (response) {
            alert(response.d);
        }
    });


    window.gMapsCallback = function () {
        gMapsLoaded = true;
        $(window).trigger('gMapsLoaded');
    }
    window.loadGoogleMaps = function () {
        if (gMapsLoaded) return window.gMapsCallback();
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type", "text/javascript");
        script_tag.setAttribute("src", "http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback");
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    }

    $(document).ready(function () {
        function initialize() {
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(24.678517, 46.702267),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map'), mapOptions);


            for (var i = 0; i < latlng.length; i++) {

                marker = new google.maps.Marker({
                    map: map,
                    position: latlng[i]
                });
                var infowindow = new google.maps.InfoWindow({
                    content: 'Location info:<br/>Country Name:<br/>LatLng:'
                });
                google.maps.event.addListener(marker, 'click', function () {
                    // Calling the open method of the infoWindow 
                    infowindow.open(map, marker);
                });
            }
        }

        $(window).bind('gMapsLoaded', initialize);
        window.loadGoogleMaps();
    });


</script>

Html

<div id ="map"   style="width:850px; bottom:20px;  height: 500px;">
</div>

I think i'm missing something here Should i parse latlng array of google.maps.LatLng objects to LatLng before i assign it to position ?

marker = new google.maps.Marker({
                    map: map,
                    position: latlng[i]
                });

Your help will be appreciated, Thanks in advance,

Answer 1

I moved xml processing after map initialization

$(document).ready(function () {
        function initialize() {
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(24.678517, 46.702267),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map'), mapOptions);


            xmlDoc = $.parseXML(stringxml);
            $(xmlDoc).find("Table").each(function () {
                marker = new google.maps.Marker({
                    map: map,
                    position: new google.maps.LatLng($(this).find("lat").text(), $(this).find("lng").text())
                });
                var infowindow = new google.maps.InfoWindow({
                    content: 'Location info:<br/>Country Name:<br/>LatLng:'
                });
                google.maps.event.addListener(marker, 'click', function () {
                    // Calling the open method of the infoWindow 
                    infowindow.open(map, marker);
                });
            });





        }

        $(window).bind('gMapsLoaded', initialize);
        window.loadGoogleMaps();
    });

And every marker in its proper place.

Thanks guys

Answer 2

i think the problem is that you aren't taking into account the asynchronous nature of the ajax request.

you need to build the markers after the ajax request has completed.

put your for each loop in a function and call it within 9at the end) of your on success ajax callback.

you will also need to load the ajax after google maps has loaded otherwise you wont be able to create google latlng objects becasue google maps librbary may not be loadded yet.

withjout rewriting everything this may work..

$.ajaxSetup({
    cache: false
});




var gMapsLoaded = false;
var latlng = [];
var returnValue;
var marker;
var xmlDoc;





window.gMapsCallback = function () {
    gMapsLoaded = true;
    $(window).trigger('gMapsLoaded');
}
window.loadGoogleMaps = function () {
    if (gMapsLoaded) return window.gMapsCallback();
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type", "text/javascript");
    script_tag.setAttribute("src", "http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback");
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}

$(document).ready(function () {
    function initialize() {
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(24.678517, 46.702267),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map'), mapOptions);


 $.ajax({
    type: "POST",
    url: "map.aspx/getLatLng",
    data: '{}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        xmlDoc = $.parseXML(response.d);
        $(xmlDoc).find("Table").each(function () {
            latlng.push(new google.maps.LatLng($(this).find("lat").text(), $(this).find("lng").text()));
        });

        for (var i = 0; i < latlng.length; i++) {

            marker = new google.maps.Marker({
                map: map,
                position: latlng[i]
            });
            var infowindow = new google.maps.InfoWindow({
                content: 'Location info:<br/>Country Name:<br/>LatLng:'
            });
            google.maps.event.addListener(marker, 'click', function () {
                // Calling the open method of the infoWindow 
                infowindow.open(map, marker);
            });
        }

    },
    failure: function (response) {
        alert(response.d);
    },
    error: function (response) {
        alert(response.d);
    }
});



    }

    $(window).bind('gMapsLoaded', initialize);
    window.loadGoogleMaps();
});