Складываем данные маркеров в массив объектов - каждый содержит координаты и контент всплывающего окна:
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));
Всё.