Блог

Я хочу разместить несколько маркеров на карте Google, каждый со своим собственным infowindow. Данные, которые мне нужны для размещения этих маркеров, являются динамическими и получены из удаленного 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, которую я сейчас исправил. Теперь проблема в том, что все infowindows отображают одни и те же данные, а не разные для каждого. Однако теперь он показывает разные маркеры.
EDIT2: теперь он работает. Следуйте инструкциям, приведенным здесь http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows

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

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

вместо:

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

для этого также может потребоваться указать идентификаторы:

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

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

 console.log(data);
  

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

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