Как сократить код Google Maps, если нужно добавить несколько меток?

Question

[mxbeat]

Подскажите, как сократить javaScript код, чтобы не повторять одно и то же для каждой метки на карте (только координаты и контент у меток будет разный), а так же как сделать, чтоб при клике иконка менялась на customIconActive
Код:

// Set coordinates for points
	var point1 = {lat: 47.649580,	lng: 12.729179};
	var point2 = {lat: 47.651604,	lng: 12.729351};
	var point3 = {lat: 47.654408,	lng: 12.733771};
	var point4 = {lat: 47.652991,	lng: 12.736346};
	var point5 = {lat: 47.645677,	lng: 12.731711};
	var point6 = {lat: 47.653396,	lng: 12.734286};
	var point7 = {lat: 47.648308,	lng: 12.730209};
	var point8 = {lat: 47.654235,	lng: 12.722398};
	var point9 = {lat: 47.647903,	lng: 12.712142};
	var point10 = {lat: 47.644752, lng: 12.718536};

	var customIcon = 'img/map-icon.svg';
	var customIconActive = 'img/map-icon_active.svg';

	var map = new google.maps.Map(document.getElementById('objectsMap'), {
		zoom: 15,
		center: point1,
		mapTypeControl: false,
		streetViewControl: false,
		fullscreenControl: false,
	});
	
	//Associate the styled map with the MapTypeId and set it to display.
	map.mapTypes.set('styled_map', styledMapType);
	map.setMapTypeId('styled_map');

	var marker1 = new google.maps.Marker({
		position: point1,
		map: map,
		icon: customIcon,
	});
	var contentMarker1 = '<a href="#" class="map__objects-info">' +
								'<img src="img/project-img1.jpg" alt="">' +
								'<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
								'</a>';

	var windowMarker1 = new google.maps.InfoWindow({
		content: contentMarker1,
		pixelOffset: new google.maps.Size(0, 205),
	});
	marker1.addListener('click', function () {
		windowMarker1.open(map, marker1);
		windowMarker2.close(map, marker2);
		windowMarker3.close(map, marker3);
		windowMarker4.close(map, marker4);
		windowMarker5.close(map, marker5);
		windowMarker6.close(map, marker6);
		windowMarker7.close(map, marker7);
		windowMarker8.close(map, marker8);
		windowMarker9.close(map, marker9);
		windowMarker10.close(map, marker10);
	});

	var marker2 = new google.maps.Marker({
		position: point2,
		map: map,
		icon: customIcon,
	});
	var contentMarker2 = '<a href="#" class="map__objects-info">' +
								'<img src="img/project-img2.jpg" alt="">' +
								'<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
								'</a>';

	var windowMarker2 = new google.maps.InfoWindow({
		content: contentMarker2,
		pixelOffset: new google.maps.Size(0, 205),
	});
	marker2.addListener('click', function () {
		windowMarker2.open(map, marker2);
		windowMarker1.close(map, marker1);
		windowMarker3.close(map, marker3);
		windowMarker4.close(map, marker4);
		windowMarker5.close(map, marker5);
		windowMarker6.close(map, marker6);
		windowMarker7.close(map, marker7);
		windowMarker8.close(map, marker8);
		windowMarker9.close(map, marker9);
		windowMarker10.close(map, marker10);
	});

	var marker3 = new google.maps.Marker({
		position: point3,
		map: map,
		icon: customIcon,
	});
	var contentMarker3 = '<a href="#" class="map__objects-info">' +
								'<img src="img/project-img3.jpg" alt="">' +
								'<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
								'</a>';

	var windowMarker3 = new google.maps.InfoWindow({
		content: contentMarker3,
		pixelOffset: new google.maps.Size(0, 205),
	});
	marker3.addListener('click', function () {
		windowMarker3.open(map, marker3);
		windowMarker1.close(map, marker1);
		windowMarker2.close(map, marker2);
		windowMarker4.close(map, marker4);
		windowMarker5.close(map, marker5);
		windowMarker6.close(map, marker6);
		windowMarker7.close(map, marker7);
		windowMarker8.close(map, marker8);
		windowMarker9.close(map, marker9);
		windowMarker10.close(map, marker10);
	});

	var marker4 = new google.maps.Marker({
		position: point4,
		map: map,
		icon: customIcon,
	});
	var contentMarker4 = '<a href="#" class="map__objects-info">' +
								'<img src="img/project-img4.jpg" alt="">' +
								'<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
								'</a>';

	var windowMarker4 = new google.maps.InfoWindow({
		content: contentMarker4,
		pixelOffset: new google.maps.Size(0, 205),
	});
	marker4.addListener('click', function () {
		windowMarker4.open(map, marker4);
		windowMarker1.close(map, marker1);
		windowMarker2.close(map, marker2);
		windowMarker3.close(map, marker3);
		windowMarker5.close(map, marker5);
		windowMarker6.close(map, marker6);
		windowMarker7.close(map, marker7);
		windowMarker8.close(map, marker8);
		windowMarker9.close(map, marker9);
		windowMarker10.close(map, marker10);
	});

	var marker5 = new google.maps.Marker({
		position: point5,
		map: map,
		icon: customIcon,
	});
	var contentMarker5 = '<a href="#" class="map__objects-info">' +
								'<img src="img/project-img5.jpg" alt="">' +
								'<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
								'</a>';

	var windowMarker5 = new google.maps.InfoWindow({
		content: contentMarker5,
		pixelOffset: new google.maps.Size(0, 205),
	});
	marker5.addListener('click', function () {
		windowMarker5.open(map, marker5);
		windowMarker1.close(map, marker1);
		windowMarker2.close(map, marker2);
		windowMarker3.close(map, marker3);
		windowMarker4.close(map, marker4);
		windowMarker6.close(map, marker6);
		windowMarker7.close(map, marker7);
		windowMarker8.close(map, marker8);
		windowMarker9.close(map, marker9);
		windowMarker10.close(map, marker10);
	});

	var marker6 = new google.maps.Marker({
		position: point6,
		map: map,
		icon: customIcon,
	});
	var contentMarker6 = '<a href="#" class="map__objects-info">' +
								'<img src="img/project-img6.jpg" alt="">' +
								'<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
								'</a>';

	var windowMarker6 = new google.maps.InfoWindow({
		content: contentMarker6,
		pixelOffset: new google.maps.Size(0, 205),
	});
	marker6.addListener('click', function () {
		windowMarker6.open(map, marker6);
		windowMarker1.close(map, marker1);
		windowMarker2.close(map, marker2);
		windowMarker3.close(map, marker3);
		windowMarker4.close(map, marker4);
		windowMarker5.close(map, marker5);
		windowMarker7.close(map, marker7);
		windowMarker8.close(map, marker8);
		windowMarker9.close(map, marker9);
		windowMarker10.close(map, marker10);
	});

	var marker7 = new google.maps.Marker({
		position: point7,
		map: map,
		icon: customIcon,
	});
	var contentMarker7 = '<a href="#" class="map__objects-info">' +
								'<img src="img/project-img7.jpg" alt="">' +
								'<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
								'</a>';

	var windowMarker7 = new google.maps.InfoWindow({
		content: contentMarker7,
		pixelOffset: new google.maps.Size(0, 205),
	});
	marker7.addListener('click', function () {
		windowMarker7.open(map, marker7);
		windowMarker1.close(map, marker1);
		windowMarker2.close(map, marker2);
		windowMarker3.close(map, marker3);
		windowMarker4.close(map, marker4);
		windowMarker5.close(map, marker5);
		windowMarker6.close(map, marker6);
		windowMarker8.close(map, marker8);
		windowMarker9.close(map, marker9);
		windowMarker10.close(map, marker10);
	});

	var marker8 = new google.maps.Marker({
		position: point8,
		map: map,
		icon: customIcon,
	});
	var contentMarker8 = '<a href="#" class="map__objects-info">' +
								'<img src="img/project-img8.jpg" alt="">' +
								'<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
								'</a>';

	var windowMarker8 = new google.maps.InfoWindow({
		content: contentMarker8,
		pixelOffset: new google.maps.Size(0, 205),
	});
	marker8.addListener('click', function () {
		windowMarker8.open(map, marker8);
		windowMarker1.close(map, marker1);
		windowMarker2.close(map, marker2);
		windowMarker3.close(map, marker3);
		windowMarker4.close(map, marker4);
		windowMarker5.close(map, marker5);
		windowMarker6.close(map, marker6);
		windowMarker7.close(map, marker7);
		windowMarker9.close(map, marker9);
		windowMarker10.close(map, marker10);
	});

	var marker9 = new google.maps.Marker({
		position: point9,
		map: map,
		icon: customIcon,
	});
	var contentMarker9 = '<a href="#" class="map__objects-info">' +
								'<img src="img/project-img5.jpg" alt="">' +
								'<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
								'</a>';

	var windowMarker9 = new google.maps.InfoWindow({
		content: contentMarker9,
		pixelOffset: new google.maps.Size(0, 205),
	});
	marker9.addListener('click', function () {
		windowMarker9.open(map, marker9);
		windowMarker1.close(map, marker1);
		windowMarker2.close(map, marker2);
		windowMarker3.close(map, marker3);
		windowMarker4.close(map, marker4);
		windowMarker5.close(map, marker5);
		windowMarker6.close(map, marker6);
		windowMarker7.close(map, marker7);
		windowMarker8.close(map, marker8);
		windowMarker10.close(map, marker10);
	});

	var marker10 = new google.maps.Marker({
		position: point10,
		map: map,
		icon: customIcon,
	});
	var contentMarker10 = '<a href="#" class="map__objects-info">' +
								'<img src="img/project-img6.jpg" alt="">' +
								'<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
								'</a>';

	var windowMarker10 = new google.maps.InfoWindow({
		content: contentMarker10,
		pixelOffset: new google.maps.Size(0, 205),
	});
	marker10.addListener('click', function () {
		windowMarker10.open(map, marker10);
		windowMarker1.close(map, marker1);
		windowMarker2.close(map, marker2);
		windowMarker3.close(map, marker3);
		windowMarker4.close(map, marker4);
		windowMarker5.close(map, marker5);
		windowMarker6.close(map, marker6);
		windowMarker7.close(map, marker7);
		windowMarker8.close(map, marker8);
		windowMarker9.close(map, marker9);
	});

Answer 1

[0xD34F]

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

const markersData = [
  { position: { lat: ..., lng: ... }, content: '...' },
  { position: { lat: ..., lng: ... }, content: '...' },
  ...
];

Всплывающее окно - одно на всех:

const infoWindow = new google.maps.InfoWindow();

Создаём массив маркеров:

const markers = markersData.map(({ position, content }) => {
  const marker = new google.maps.Marker({ position, map });

  marker.addListener('click', () => {
    infoWindow.setContent(content);
    infoWindow.open(map, marker);
  });

  return marker;
});

Смена иконки - сделаем метод, который будет устанавливать активную у указанного маркера, а у остальных дефолтную (если надо сбросить текущую активную, передаёте null):

const setActiveIcon = marker => markers.forEach(n => n.setIcon(n === marker ? iconActive : icon));

Всё.

Comments

[mxbeat]

Что-то у меня так вообще карта не работает... Нашел вот такой код: https://jsfiddle.net/s8buz46c/ но тут нет infoWindow, можете подсказать, как добавить в этот код всплывающее окно с контентом для каждой метки? А то в документации пример только для одной метки: https://jsfiddle.net/api/post/library/pure/ а как добавить это в массив я не разобрался

[0xD34F]

mxbeat, "не работает" - это разговор ни о чём.

"Нашёл такой код", "добавить в этот код" - ровно это и было сделано. Это мой код, написанный два с лишним года назад для ответа на другой вопрос, и использованный при написании ответа на этот. Вы вообще как, заметили, что последнее слово в ответе является ссылкой?

[mxbeat]

0xD34F, не заметил, что последнее слово является ссылкой ) Спасибо огромное за код!