Клик по DOM элементу с id для открытия infoWindow с идентичным id, google maps

Есть карта с маркерами которые представлены в виде массива, у которых разные infoWindow, в каждом из которых есть кнопка. Есть боковое меню, где представлены элементы со своим id. При клике на элемент нужно открывать маркер с таким-же id. На данный момент открывается только последний маркер из массива. После этого, при клике на кнопку нужно менять иконку у ЭТОГО маркера. На этом все.

Как при клике на DOM элемент с id, открывать infoWindow с идентичным id? Чтобы все работало исправно и при клике на кнопку иконка успешно менялась у ЭТОГО маркера. Буду очень благодарен за ответ, ибо мучаюсь уже несколько дней.


Ответы (1 шт):

Автор решения: NoSkill

Создайте ассоциативный список ваших маркеров:

var markers = {};

Теперь, когда вы создаете маркеры, сохраняйте их в этом списке с текущим id:

// здесь id совпадает с id DOM элемента
markers[id] = new google.maps.Marker({...});

Далее, при клике на DOM element, быстро находите этот маркер и делаете с ним что угодно, меняете, иконку, открываете инфо-окно и т.д.:

var myMarker = markers[element.id];

Чтобы не было коллизий названий ваших id со свойствами и методами Object, можно сделать так, чтобы ваши id начинались с какого-нибудь префикса, например:

// рекомендуемые названия id
'el_mark_01'    
'el_mark_02'    
'el_mark_03'
→ Ссылка