@EvgeniyVeter1980

Как добавить инфобоксы к каждому маркеру Google карты?

У меня есть Google карта и она имеет много меток, суть вопроса, как добавить каждой метки свой инфо бокс?

Вот как я пробовал, но увы не работает:

window.initialize = function(){
    
var myLatlng = new google.maps.LatLng(59.928242, 30.347073);
        var pos1 = new google.maps.LatLng(59.939175, 30.327326);
        var pos2 = new google.maps.LatLng(59.938830, 30.339343);
        var pos3 = new google.maps.LatLng(59.944133, 30.227353);
        var pos4 = new google.maps.LatLng(59.956754, 30.354808);
  var mapOptions = {
    zoom: 12,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
 
  var image =  'images/marker.png';
 
  var marker = new google.maps.Marker({
      position: pos1,
      map: map,
	  content: ('<p>Нaбережная канала Грибоедова д.7(внутри двора)</p>'),
      title: 'Нaбережная канала Грибоедова д.7(внутри двора)',
      icon: image
  });
  var marker = new google.maps.Marker({
      position: pos2,
      map: map,
	  content: ('<p>Нaбережная канала Грибоедова д.7(внутри двора)</p>'),
      title: 'Кленовая Улица д.2',
      icon: image
  });
        
  var marker = new google.maps.Marker({
      position: pos3,
      map: map,
	  content: ('<p>Нaбережная канала Грибоедова д.7(внутри двора)</p>'),
      title: 'Наличная улица д.32',
      icon: image
  });
        
  var marker = new google.maps.Marker({
      position: pos4,
      map: map,
	  content: ('<p>Нaбережная канала Грибоедова д.7(внутри двора)</p>'),
      title: 'ст. м. Площадь Ленинаб Финский пер. д.8а',
      icon: image
  });
  
  var infowindow = new google.maps.InfoWindow({
    content: content,
  });
  
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });
    
}
google.maps.event.addDomListener(window, 'load', initialize);
  • Вопрос задан
  • 62 просмотра
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега JavaScript
Складываете в массив объектов координаты маркеров и контент для всплывающего окна:

const markerData = [
  { coord: [ ... ], content: '...' },
  { coord: [ ... ], content: '...' },
  ...
];

Создаёте на основе этого массива маркеры, добавляете маркерам обработчик клика, в котором окно получает контент и открывается:

markerData.forEach(function(n) {
  const marker = new google.maps.Marker({
    position: new google.maps.LatLng(...n.coord),
    map,
  });

  marker.addListener('click', function() {
    infowindow.setContent(n.content);
    infowindow.open(map, marker);
  });
});

Всё.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы