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

Question

[EvgeniyVeter1980]

У меня есть 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);

Answer 1

[0xD34F]

Складываете в массив объектов координаты маркеров и контент для всплывающего окна:

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);
  });
});

Всё.

Comments

[EvgeniyVeter1980]

А возможно в код добавить HTML теги?

[0xD34F]

EvgeniyVeter1980, разрешаю вам попробовать.

[EvgeniyVeter1980]

Спасибо)

[EvgeniyVeter1980]

тут какая-то ошибка
position: new google.maps.LatLng(...n.coord),

[0xD34F]

EvgeniyVeter1980, нет никакой ошибки.

[EvgeniyVeter1980]

можете помочь, я отблагодарю?

[EvgeniyVeter1980]

мне нужно в код вставить то что вы дали, помогите пожалуйста

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: ('Нaбережная канала Грибоедова д.7(внутри двора)'),
title: 'Нaбережная канала Грибоедова д.7(внутри двора)',
icon: image
});
var marker = new google.maps.Marker({
position: pos2,
map: map,
content: ('Нaбережная канала Грибоедова д.7(внутри двора)'),
title: 'Кленовая Улица д.2',
icon: image
});

var marker = new google.maps.Marker({
position: pos3,
map: map,
content: ('Нaбережная канала Грибоедова д.7(внутри двора)'),
title: 'Наличная улица д.32',
icon: image
});

var marker = new google.maps.Marker({
position: pos4,
map: map,
content: ('Нaбережная канала Грибоедова д.7(внутри двора)'),
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);

[0xD34F]

EvgeniyVeter1980, нет, помогать вам копипастить код я не буду - с такой ерундой вам стоит отправиться сюда.

[EvgeniyVeter1980]

я заплатил бы за ваши услуги

[0xD34F]

EvgeniyVeter1980, вот там и заплатите. Кому-нибудь другому.

[EvgeniyVeter1980]

спасибо