Google Maps API: JSON для jQuery

Question

У меня проблемы с отображением маркеров с помощью API Карт Google версии 3.

Это мой JavaScript:

function getMap(zoom, center) {
var myOptions = {
    zoom: zoom,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);

var marker = new google.maps.Marker({ position: centerBegin })
$.getJSON('json/markers.json', function (data) {
    $.each(data, function (i, marker) {

        var markerOptions = { map: map, position: new google.maps.LatLng(marker.latitude, marker.longtitude) , title: 'test'};
        var marker = new google.maps.Marker(markerOptions);
        /*var marker = new google.maps.Marker({
            position: new google.maps.LatLng(marker.latitude, marker.longtitude),
            content: i.toString(),
            map: map,
            title: 'test'
        });*/
    });
});

}

Вот мойФайл JSON:

{"markers": [ 
    {"text":"Ondertekenen koopverkoopcontract", "latitude":-12.917239,     "longtitude":-38.48209},
    {"text":"Openen documentair krediet", "latitude":51.218584, "longtitude":4.40413},
    {"text":"Transport van producent naar haven Salvador", "latitude":51.22952, "longtitude":4.411617},
    {"text":"Vertrek naar haven Antwerpen", "latitude":-12.968114, "longtitude":-38.511543},
    {"text":"Aankomst haven Antwerpen + vertrek naar Transibel", "latitude":51.22952, "longtitude":4.411617},
    {"text":"Aankomst Transibel", "latitude":51.094863, "longtitude":4.12973},
    {"text" : "center point", "latitude":28.767659, "longtitude":-31.640625}
]} 

Я не вижу никаких маркеров на своей карте.Может ли кто-нибудь помочь мне с этим?

Answer 1

Есть две проблемы с примером кода, который вы опубликовали.

1. Итерации по data, когда вы действительно хотите итерировать по data['markers'].Если вы посмотрите на свой файл JSON, то увидите, что это не array, а object, элемент markers которого содержит array информации о маркере.

2. Чрезмерное использование переменной marker, как указано в графическом разделении.

Answer 2

Похоже, вы повторно объявляете marker внутри цикла each, как показано ниже.

$.each(data, function (i, marker) {
//--------------------------^
    // [...]
    var marker = new google.maps.Marker(markerOptions);
//--------^