Question

I’m using google maps v3. I created some markers, with info from json file.
I’m trying to put some routelines on my map, but this isn’t working and I have no idea why not.

Here is my jQuery code:

var positions = [];
var map;

$(function () {
    map = initializeMap();
    loadMarkers();
    var flightPath = new google.maps.Polyline({
        path: positions,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

    flightPath.setMap(map);
});

function initializeMap() {
    var myOptions = {
        center: new google.maps.LatLng(41.376809, -37.441406),
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);

    return map;

};

function loadMarkers() {
    var latlng;
    var marker;
    var image = 'img/praline.png';
    $.getJSON('json/markers.json', function (data) {
        $(data).each(function (index, value) {
            latlng = new google.maps.LatLng(value.x, value.y);
            marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: value.title,
                icon: image
            });
            positions[value.id - 1] = latlng;

        });

    });


}

And here my json file:

[
    {
        "class":"marker",
        "id":1,
        "x":"47.175303",
        "y":"7.064539",
        "title":"Camille Bloch",
        "date":"21/10/2010",
        "details":"<h1>Camille Bloch</h1><h4>Courtelary, CH</h4><img src='img/camille_bloch.gif' alt='Camille Bloch' width='100px'>"
    },
    {
        "class":"marker",
        "id":2,
        "x":"51.903421",
        "y":"4.483248",
        "title":"Haven Rotterdam",
        "date":"22/10/2010",
        "details":"<h1>Haven Rotterdam</h1><h4>Rotterdam, NL</h4><img src='img/camille_bloch.gif' alt='Camille Bloch' width='100px'>"
    }
]

Thanks in advance.

Answer 1

Since AJAX is asynchronous, you need to put the polyline inside that getJSON callback (after the LatLngs are actually created), like below, or some variation. Otherwise the code is just setting an empty positions array to the polyline.

$.getJSON('json/markers.json', function(data) {
    function(data) {

        $(data).each(function(index, value) {
            alert(value.x);
            latlng = new google.maps.LatLng(value.x, value.y);
            marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: value.title,
                icon: image
            });
            positions[value.id - 1] = latlng;

        });

        var flightPath = new google.maps.Polyline({
            path: positions,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2
        });

        flightPath.setMap(map);

    });​
}