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", ";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,

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./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,

• javascript
• ajax
• google-maps
• google-maps-api-3

• 1 A couple of questions, is the ajax call actually firing? Why are you requesting JSON in the ajax request and then parsing it into xml? – ChrisSwires Commented Feb 4, 2014 at 15:14
• @Swires yes its firing im just getting data and populating var latlng = []; with data to be used later when maps loaded successfully. – dotmido Commented Feb 4, 2014 at 16:39

2 Answers 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 pleted.

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./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();
});

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