Google maps JS API V3, добавьте несколько маркеров для сопоставления с информационными окнами из удаленного источника json

Question

Я хочу разместить несколько маркеров на карте Google, каждый из которых имеет собственное информационное окно. Данные, которые мне нужны для размещения этих маркеров, являются динамическими и получены из удаленного API, который обеспечивает вывод json. JSON имеет формат,

{0 : {lat:"", lng:"", description:"", .....}, 1 : {lat: "", .....}}

и так далее. Он может содержать любое количество наборов значений. Формат каждого набора, однако, определен. Кроме того, ключи таковы, что их можно легко перебирать. Код, который я написал, выглядит следующим образом:

var map;
var initPos;
var marker;
var pins;
var infowindow = null;

function count(obj) {
  var i = 0;
  for (var x in obj)
    if (obj.hasOwnProperty(x))
      i++;
  return i;
};

function initialize() {
    var myOptions = {
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    infowindow = new google.maps.InfoWindow();

    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
        initPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        map.setCenter(initPos);
        }, function() {
            initPos = new google.maps.LatLng(19.074448,72.872314);
            map.setCenter(initPos);
        });
    }
    else {
        initPos = new google.maps.LatLng(19.074448,72.872314);
        map.setCenter(initPos);
    }
    var i, pins, html, pinLatLng, pinMarkers, contentString;
    $.getJSON('/user/map/', function (data) {
        for (i = 0; i < count(data); i++) {
            pins = data[i];
            html = '<h4>'+pins['title']+'</h4>'+'<p>'+pins['description']+'</p>'+'<p><a href="'+pins['url']+'">Read More</a>'
            pinLatLng = new google.maps.LatLng(parseFloat(pins['lat']), parseFloat(pins['lng']));
            pinMarkers = new google.maps.Marker({position: pinLatLng, map: map, animation: google.maps.Animation.Drop});
            contentString = "Some content";
            google.maps.event.addListener(pinMarkers, "click", (function(pinMarkers, i) {
                return function() {
                    infowindow.setContent(html);
                    infowindow.open(map, pinMarkers);
                }
            })(pinMarkers, i));
        }
    });
};

Не обращайте внимания на часть navigator.geolocation, но посмотрите на другие вещи. Теперь этот скрипт отмечает только последний маркер в json на карте, а остальные не отображаются. Что я делаю неправильно? РЕДАКТИРОВАТЬ: Итак, я сделал ошибку в формате JSON, который я исправил сейчас. Теперь проблема в том, что все информационные окна отображают одни и те же данные, а не разные для каждого. Теперь он показывает разные маркеры. EDIT2 : сейчас работает. Следуйте инструкциям, приведенным здесь http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

Answer 1

Вы проверили, что jQuery получает данные JSON в правильном формате? jQuery может быть очень строгим с проверкой JS, и в этом случае я бы порекомендовал формат:

[{object},{object},{object}]

вместо:

{0:{object},1:{object},2:{object}}

, который может также потребовать, чтобы вы указали идентификаторы:

{"0":{object},"1":{object},"2":{object}}

Итак, перед первой строкой вашей функции маркера добавьте:

console.log(data);

и посмотри, что получится. Как только вы подтвердите, что данные верны, я бы также порекомендовал выполнить цикл с помощью оператора $ .each в jQuery:

$.each(data,function(key,val){
 //stuff
});