Несколько маркеров не отображаются в Картах Google с Javascript API v3?

Question

Я хотел бы знать, как разместить несколько маркеров для Карт Google, используя Javascript API v3.

Я попробовал опубликованное решение здесь , но у меня почему-то не работает:

var directionDisplay;

function initialize() {        
  var myOptions = { zoom: 9, center: new google.maps.LatLng(40.81940575,-73.95647955), mapTypeId: google.maps.MapTypeId.TERRAIN }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  setMarkers(map, properties);

  var properties = [
    ['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'],
  ];

  function setMarkers(map, buildings) {
    var image = new google.maps.MarkerImage('map_marker.png', new google.maps.Size(19,32), new google.maps.Point(0,0), new google.maps.Point(10,32));
    var shadow = new google.maps.MarkerImage('map_marker_shadow.png', new google.maps.Size(28,32), new google.maps.Point(0,0), new google.maps.Point(10,32));
    var bounds = new google.maps.LatLngBounds;
    for (var i in buildings) {
      var myLatLng = new google.maps.LatLng(buildings[i][1], buildings[i][2]);
      bounds.extend(myLatLng);
      var marker = new google.maps.Marker({ position: myLatLng, map: map, shadow: shadow, icon: image, title: buildings[i][0] });
      google.maps.event.addListener(marker, 'click', function() { window.location = ('detail?b=' + buildings[i][3]); });
    }
    map.fitBounds(bounds);  
  }
}
</script>

Кто-нибудь может объяснить, почему это не работает для меня?

Answer 1

Этому вопросу уже несколько месяцев, но я заметил, что он остался без ответа. Я предполагаю, что ОП уже нашел способ преодолеть это, но позвольте мне попытаться ответить ради полноты.

---

Я могу заметить несколько основных проблем в вашем коде выше:

1. Прежде всего, вы пытаетесь передать массив properties в функцию setMarkers() до того, как будет определено properties. Поэтому setMarkers() получит undefined за второй аргумент, поэтому на вашей карте ничего не отображается.

2. Тогда у вас есть очень распространенная проблема закрытия в этом цикле for in. Переменные, заключенные в замыкание, совместно используют одну и ту же среду, поэтому к тому моменту, когда вызывается обратный вызов click из addListener, цикл завершит свою работу, а переменная i останется указывающей на последнее значение имел когда закончился цикл.

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

---

Чтобы решить первую проблему, просто определите массив properties перед вызовом setMarkers():

var properties = [
  ['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'],
];

setMarkers(map, properties);

Затем вы можете решить проблему замыкания с помощью еще большего числа замыканий, используя фабрику функций:

function makeClickCallback(buildings, i) {  
   return function() {  
      window.location = ('detail?b=' + buildings[i][3]);
   };  
} 

for (var i in buildings) {
   // ...

   google.maps.event.addListener(marker, 'click', 
                                 makeClickCallback(buildings, i);
}

Это может быть довольно сложной темой, если вы не знакомы с тем, как работают замыкания. Вы можете ознакомиться со следующей статьей Mozilla для краткого введения:

• Работа с крышками

Тогда вы можете убедиться, что удалили висячую запятую в литерале массива:

var properties = [
  ['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4']  // no comma
];

Кроме того, обратите внимание, что поскольку в вашем массиве properties есть только один элемент, на карте вы получите только один маркер. Я не уверен, были ли удалены другие элементы ради этого примера, но если это не так, просто добавьте больше мест, как это:

var properties = [
  ['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'],
  ['Another Location',50.505050,-75.505050,'Mjg5']
];