Несколько маркеров для Google Maps API V3 с пользовательским значком

Question

У меня проблемы с отображением нескольких маркеров на моей карте Google.Я пробовал вещи со всего интернета, но большую часть времени карта просто ломалась.

РЕДАКТИРОВАТЬ: мне удалось запустить несколько маркеров.Теперь мне нужно только добавить информационные окна к каждому.

Мой обновленный код выглядит следующим образом:

<script type="text/javascript">
function initialize() {
latLngs = [ 
    new google.maps.LatLng(44.3118328, -79.5549532),
    new google.maps.LatLng(44.3118325, -80.5549533),
    new google.maps.LatLng(44.3118326, -81.5549534),
    new google.maps.LatLng(44.3118327, -82.5549535)
    ];

var latlng = new google.maps.LatLng(44.3118328, -79.5549532);
var myOptions = {
  zoom: 15,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};


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


var contentString = '<div id="mapinfowindow">'+'1970 Thompson St <br> Innisfil' + '<br>' + '$329,900'
+'<a href="http://www.something.com/Featured_Listings_files/1970%20Thompson%20-%20Brochure.pdf"><br><br>View Brochure</a></div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString,
});

      var image = new google.maps.MarkerImage(
'images/marker.png',
new google.maps.Size(50,50),
new google.maps.Point(0,0),
new google.maps.Point(25,50)
);

var shadow = new google.maps.MarkerImage(
'images/markershadow.png',
new google.maps.Size(78,50),
new google.maps.Point(0,0),
new google.maps.Point(25,50)
);

var shape = {
coord: [28,3,32,4,35,5,37,6,38,7,39,8,40,9,42,10,42,11,43,12,44,13,44,14,44,15,45,16,45,17,45,18,45,19,45,20,45,21,45,22,45,23,44,24,44,25,44,26,43,27,43,28,42,29,41,30,41,31,40,32,39,33,39,34,38,35,37,36,36,37,35,38,34,39,33,40,32,41,31,42,30,43,29,44,28,45,26,46,24,47,24,47,22,46,21,45,19,44,18,43,17,42,16,41,15,40,14,39,13,38,12,37,12,36,11,35,10,34,9,33,9,32,8,31,7,30,7,29,6,28,5,27,5,26,4,25,4,24,4,23,4,22,3,21,3,20,3,19,3,18,4,17,4,16,4,15,4,14,5,13,6,12,6,11,7,10,8,9,9,8,10,7,12,6,14,5,16,4,20,3,28,3],
type: 'poly'
};


var markers = new Array(latLngs.length);

for (var i = 0; i < markers.length; i++) {
 markers[i] = new google.maps.Marker({
    position: latLngs[i],
    title:"Marker "+i,
    icon: image,
    shadow: shadow,
    map: map,
    shape: shape
});
markers[i].setMap(map);     
}

for (var i2 = 0; i2 < markers.length; i2++) {
    google.maps.event.addListener(markers[i2], 'click', function() {
    infowindow.open(map,markers[i2]);
    });
}

}

Теперь мне нужно добавить информационные окна к каждому маркеру, каждый с уникальным содержимым.внутри окна.

Спасибо, что уделили время.

Answer 1

Допустим, у вас есть массив объектов LatLng с вызовом latLngs и что вы хотите маркер для каждого из этих объектов.Вы можете сделать это примерно так (взяв хвост вашего кода в свой вопрос и изменив его):

var markers = new Array(latLngs.length);
for (var i = 0; i < markers.length; i++) {
    markers[i] = new google.maps.Marker({
        position: latLngs[i],
        title:"Marker "+i,
        icon: image,
        shadow: shadow,
        map: map,
        shape: shape
    });
    markers[i].setMap(map);
}

Главное, что вы не можете повторно использовать переменную marker.Вам нужно использовать разные переменные для каждого маркера, следовательно, массив.

Answer 2

Похоже, что ОП смог использовать решение Тротта, но я не мог заставить его работать самостоятельно.Я нашел что-то еще, что, возможно, проще и работает для меня прямо здесь .Подводя итог, оберните вызов addlistener в вашу собственную функцию, а затем вызовите эту функцию из вашего цикла (где бы вы ни просматривали данные или маркеры).Моя функция просто ...

function listenInfoWindows(marker, infowindow) {
  google.maps.event.addListener(marker, 'click', function(){
      infowindow.open(map, marker); 
    }
  );
}