Как связать свою кнопку с соответствующим маркером google maps?

Question

[schip454]

Есть гугл карта с маркерами и соответственно всплывающим окном.
Не понимаю, как связать кнопку с каждым маркером.
Т.е., нужно чтобы по клику на айтем слева от карты открывался соответствующий попап.

Вот мой код js:

function initMap() {
  const map = new google.maps.Map(document.querySelector(".map__content"), {
    zoom: 9.8,
    center: { lat: 42.30131361665214, lng: -83.26433857597175 },
  });
  let infoPopup;

  // данные маркера
  const markers = [
    {
      name: "DEARBORN WEST",
      coordinates: { lat: 42.30131361665214, lng: -83.26433857597175 },
      info: ` 
      <div class="map__popup map__popup--1">
      <div class="map__popup-inner">
        <h5 class="map__popup-title">DEARBORN WEST</h5>
        <p class="map__popup-adress">
          23455 MICHIGAN AVE DEARBORN, MI 48124
        </p>
        <a href="tel:[phone]" class="map__popup-number"
          >[phone]</a
        >
        </div>
        <div class="map__popup-worktime">
          <div class="map__popup-time">9AM–9PM<span>Mon–Sun </span></div>
          <div class="map__popup-time">
            9AM–5PM<span>Holidays </span>
          </div>
        </div>
        <button class="map__item-btn map__popup-btn">Save my spot</button>
      </div>
      `,
      image: "../images/pin.svg",
      activeImage: "../images/redpin.svg",
    },
    {
      name: "LIVONIA",
      coordinates: { lat: 42.368829865751955, lng: -83.33192302994873 },
      info: ` 
      <div class="map__popup map__popup--2">
      <div class="map__popup-inner">
        <h5 class="map__popup-title">LIVONIA</h5>
        <p class="map__popup-adress">
        11502 MIDDLEBELT ROAD LIVONIA, MI 48150
        </p>
        <a href="tel:[phone]" class="map__popup-number"
          >[phone]</a
        >
        </div>
        <div class="map__popup-worktime">
          <div class="map__popup-time">9AM–9PM<span>Mon–Sun </span></div>
          <div class="map__popup-time">
            9AM–5PM<span>Holidays </span>
          </div>
        </div>
        <button class="map__item-btn map__popup-btn">Save my spot</button>
      </div>
      `,
      image: "../images/pin.svg",
      activeImage: "../images/redpin.svg",
    },
    {
      name: "TAYLOR",
      coordinates: { lat: 42.23250083684662, lng: -83.26826548762394 },
      info: `
      <div class="map__popup map__popup--3">
      <div class="map__popup-inner">
        <h5 class="map__popup-title">TAYLOR</h5>
        <p class="map__popup-adress">
         10155 TELEGRAPH RD TAYLOR, MI 48180
        </p>
        <a href="tel:[phone]" class="map__popup-number"
          >[phone]</a
        >
        </div>
        <div class="map__popup-worktime">
          <div class="map__popup-time">9AM–9PM<span>Mon–Fri </span></div>
          <div class="map__popup-time">
          CLOSED<span>Saturday–Sunday </span>
          </div>
        </div>
        <button class="map__item-btn map__popup-btn">Save my spot</button>
      </div>
      `,
      image: "../images/pin.svg",
      activeImage: "../images/redpin.svg",
    },
    {
      name: "DEARBORN EAST",
      coordinates: { lat: 42.32937404396069, lng: -83.16846993179551 },
      info: `
      <div class="map__popup map__popup--4">
      <div class="map__popup-inner">
        <h5 class="map__popup-title">DEARBORN EAST</h5>
        <p class="map__popup-adress">
           12841 FORD RD DEARBORN, MI 48126
        </p>
        <a href="tel:[phone]" class="map__popup-number"
          >[phone]</a
        >
        </div>
        <p class="map__popup-work">24HRS A DAY <br> 365 DAYS A YEAR</p>
        <button class="map__item-btn map__popup-btn">Save my spot</button>
      </div>
      `,
      image: "../images/pin.svg",
      activeImage: "../images/redpin.svg",
    },
    {
      name: "BLOOMFIELD",
      coordinates: { lat: 42.605625499956275, lng: -83.29637560295008 },
      info: `
      <div class="map__popup">
      <div class="map__popup-inner">
        <h5 class="map__popup-title">BLOOMFIELD</h5>
        <p class="map__popup-adress">
        274 S TELEGRAPH ROAD BLOOMFIELD, MI 48302
        </p>
        <a href="tel:[phone]" class="map__popup-number"
          >[phone]</a
        >
        </div>
        <div class="map__popup-worktime">
          <div class="map__popup-time">9AM–9PM<span>Mon–Fri </span></div>
          <div class="map__popup-time">
          9AM–5PM<span>Weekends and holidays </span>
          </div>
        </div>
        <button class="map__item-btn map__popup-btn">Save my spot</button>
      </div>
      `,
      image: "../images/pin.svg",
      activeImage: "../images/redpin.svg",
    },
    {
      name: "SOUTHFIELD",
      coordinates: { lat: 42.507171246549284, lng: -83.22193751644866 },
      info: `
      <div class="map__popup">
      <div class="map__popup-inner">
        <h5 class="map__popup-title">SOUTHFIELD</h5>
        <p class="map__popup-adress">
          29628 SOUTHFIELD ROAD SOUTHFIELD, MI 48076
        </p>
        <a href="tel:[phone]" class="map__popup-number"
          >[phone]</a
        >
        </div>
        <div class="map__popup-worktime">
          <div class="map__popup-time">9AM–9PM<span>Mon–Fri </span></div>
          <div class="map__popup-time">
          9AM–5PM<span>Weekends and holidays </span>
          </div>
        </div>
        <button class="map__item-btn map__popup-btn">Save my spot</button>
      </div>
      `,
      image: "../images/pin.svg",
      activeImage: "../images/redpin.svg",
    },
    {
      name: "GARDEN CITY",
      coordinates: { lat: 42.325582511048424, lng: -83.3512507587854 },
      info: `
      <div class="map__popup">
      <div class="map__popup-inner">
        <h5 class="map__popup-title">GARDEN CITY</h5>
        <p class="map__popup-adress">
           31450 FORD RD GARDEN CITY, MI 48135
        </p>
        <a href="tel:[phone]" class="map__popup-number"
          >[phone]</a
        >
        </div>
        <div class="map__popup-worktime">
          <div class="map__popup-time">9AM–9PM<span>Mon–Fri </span></div>
          <div class="map__popup-time">
          9AM–5PM<span>Weekends and holidays </span>
          </div>
        </div>
        <button class="map__item-btn map__popup-btn">Save my spot</button>
      </div>
      `,
      image: "../images/pin.svg",
      activeImage: "../images/redpin.svg",
    },
  ];

  //let item = document.querySelector(".map__item--1");

  // добавление маркера на страницу
  for (let i = 0; i < markers.length; i++) {
    addMarker(markers[i]);
  }

  // функция обьявления маркера
  function addMarker(properties) {
    const marker = new google.maps.Marker({
      position: properties.coordinates,
      map,
      icon: properties.image,
      title: properties.name,
    });

    if (properties.info) {
      if (infoPopup) {
        infoPopup.close();
        marker.setIcon(properties.image);
      }

      infoPopup = new google.maps.InfoWindow();

      // console.log(marker.getTitle());

      google.maps.event.addListener(marker, "click", function () {
        infoPopup.setContent(properties.info);
        marker.setIcon(properties.activeImage);
        infoPopup.open(map, marker);
      });

      map.addListener("click", () => {
        infoPopup.close();
        marker.setIcon(properties.image);
      });

      // item.addListener(marker, "click", () => {
      //   infoPopup.setContent(properties.info);
      //   marker.setIcon(properties.activeImage);
      //   infoPopup.open(map, marker);
      // });


      // const qwe = document.querySelectorAll(".map__item");
      // qwe.addEventListener("click", function () {
      //   infoPopup.close();
      //   infoPopup.setContent(properties.info);
      //   // marker.setIcon(properties.activeImage);
      //   infoPopup.open(map);
      // });
    }
  }

  markers.forEach(addMarker);
}

window.initMap = initMap;

Answer 1

[0xD34F]

Маркеры сложить в массив, по клику на кнопки доставать из массива маркер с тем же индексом, что и у кнопки, триггерить на нём событие клика. Как-то так.