Почему возникает ошибка в работе маркера в GoogleMap?

Question

[Alina1984]

Добрый день. Очень прошу помочь с возникшей ошибкой при работе маркера для отображения кастомного информационного окна для него.
Проблема состоит в том, что соответствующее информационное окно появляется не только при клике на маркер но и на область в которой она скрыта до клика.
По факту правильная работа предполагает, что информационное окно должно появляться только при клике на маркер. А закрываться либо при клике по информационному окну либо при клике на маркер.

<div class="section-map" id="map-delizioso">
    <div id="map-delizioso"></div>
</div>

#map-delizioso {
    min-height: toRem(663);
    width: 100%;
}
 
.property.highlight .section-map__address{
    opacity: 1;
    scale: 1;
}
 
.property.highlight .section-map__address {
  opacity: 1;
  scale: 1
}
.section-map__address {
  background-color: var(--bgGoogleMapInfo);
  border-radius: clamp(.5rem,.35rem + .75vw,.875rem);
  box-shadow: 10px 10px 5px rgba(0,0,0,.2);
  position: relative;
  -webkit-transform: translate(-13px,-93px);
  transform: translate(-13px,-93px);
  transition: all .3s ease-out;
  opacity: 0;
  scale: 0
}
.section-map__address::after {
  position: absolute;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 24px solid var(--bgGoogleMapInfo);
  -webkit-filter: drop-shadow(4px 2px rgba(0, 0, 0, .2));
  filter: drop-shadow(4px 2px rgba(0, 0, 0, .2));
  content: "";
  height: 0;
  left: 50%
}
.address__body-col {
  padding: clamp(.5rem,.25rem + 1.25vw,1.125rem) clamp(.5rem,-.05rem + 2.75vw,1.875rem) clamp(.5rem,.25rem + 1.25vw,1.125rem) clamp(.5rem,.45rem + .25vw,.625rem);
  display: flex;
  width: 100%;
  justify-content: space-between;
  -webkit-column-gap: clamp(.938rem,.313rem + 3.13vw,2.5rem);
  -moz-column-gap: clamp(.938rem,.313rem + 3.13vw,2.5rem);
  column-gap: clamp(.938rem,.313rem + 3.13vw,2.5rem)
}
.body-col__marker-wrap {
  display: block;
  overflow: hidden;
  aspect-ratio: 89/120;
  max-width: 120px
}
.body-col__location-pic {
  width: 100%;
  height: 100%;
  -o-object-fit: fill;
  object-fit: fill;
  -o-object-position: center;
  object-position: center
}
.body-col__picture {
  display: block;
  overflow: hidden;
  border-radius: clamp(.5rem,.45rem + .25vw,.625rem)
}
.body-col__sm-pic {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center
}
.body-col__col-desk-inner {
  display: flex;
  width: 100%
}
.body-col__place-data {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: clamp(.563rem,.238rem + 1.63vw,1.375rem)
}
.body-col__social-icon {
  font-family: var(--fontFamilyIconsFont);
  background-color: var(--bgFooter);
  border-radius: 50%;
  color: var(--fnSeparateElements);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease-in
}
.place-data__title {
  color: var(--bgFooter);
  font-size: clamp(.75rem,.5rem + 1.25vw,1.375rem);
  font-weight: 600;
  line-height: 1.1
}
.place-data__desk-parameters {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: clamp(.188rem,.037rem + .75vw,.563rem);
  color: var(--bgFooter);
  font-size: clamp(.625rem,.425rem + 1vw,1.125rem);
  font-weight: 500;
  line-height: 1.53
}
.place-data__bronx {
  flex-grow: 1
}

// * Google Map (Block CUSTOMERS)
 
async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const center = { lat: 40.88082, lng: -73.90863 };
 
  const map = new Map(document.getElementById("map-delizioso"), {
    zoom: 14,
    center,
    mapId: "AIzaSyCiZVu7tK.......NaK3Xq76GPI",
  });
 
  const marker = new AdvancedMarkerElement({
      map: map,
      position: center,
      title: "Restaurant Delizioso",
  });
 
  for (const property of properties) {
  const beachFlagImg = document.createElement("img");
      beachFlagImg.src = "../img/items_svg/tag-location.svg";
  
  const beachFlagMarkerView = new AdvancedMarkerElement({
      map,
      position: property.position,
      content: beachFlagImg,
      title: property.description,
    });
}
 
  for (const property of properties) {
    const AdvancedMarkerElement = new google.maps.marker.AdvancedMarkerElement({
      map,
      content: buildContent(property),
      position: property.position,
      title: property.description,
    });
 
    AdvancedMarkerElement.addListener("click", () => {
      toggleHighlight(AdvancedMarkerElement, property);
    });
    
  }
}
 
function toggleHighlight(markerView, property) {
  if (markerView.content.classList.contains("highlight")) {
    markerView.content.classList.remove("highlight");
    markerView.zIndex = null;
  } else {
    markerView.content.classList.add("highlight");
    markerView.zIndex = 1;
  }
}
 
function buildContent(property) {
  const content = document.createElement("div");
 
  content.classList.add("property");
  content.innerHTML = `
                <div class="section-map__address address">
            <div class="address__body-col body-col">
 
              <div class="body-col__picture">${property.image}</div>
 
              <div class="body-col__col-desk-inner">
                <div class="body-col__place-data place-data">
                  <h3 class="place-data__title">${property.title}</h3>
                  <div class="place-data__desk-parameters">
                    <h4 class="place-data__bronx">${property.address}</h4>
                    <h5 class="place-data__coordinates">${property.coordinates}</h5>
                  </div>
                </div>
                <a href="reservation.html" class="body-col__social-icon">${property.social}</a>
              </div>
            </div>
          </div>`;
  return content;
}
 
const properties = [
  {
    image: '<img src="img/contact_page/location.png" alt="Delizioso Restaurant", class="body-col__sm-pic" width="166" height="151">',
    title: "Restaurant Delizioso",
    address: "Bronx, NY 10463, Amerika Serikat",
    description: "Restaurant for the whole family",
    coordinates: "40.88082, -73.90863",
    social: "s",
    position: {
      lat: 40.88082,
      lng: -73.90863,
    },
  },
 
];
 
initMap();

На видео показала как это происходит. Ссылки на видео
https://transfiles.ru/vr7t7
https://fex.net/ru/s/kvlk1lf

Answer 1

[Aleksey Solovyev]

Я так понимаю, что эти стили используются для скрытия всплывающего окна:

... {
  opacity: 0;
  scale: 0
}

Эти стили не удаляют элемент со страницы, и он остаётся доступным для взаимодействия. Чтобы полностью скрыть элемент, используйте display: none или visibility: hidden. Либо добавьте pointer-events: none для скрытого состояния и pointer-events: auto для видимого, чтобы сохранить анимацию.

Comments

[Alina1984]

1. Да это стили используются для скрытия всплывающего окна
2. Все ниже перечисленные свойства (display: none или visibility: hidden. pointer-events: none и pointer-events: auto) полностю убивают взаимодействие с кнопкой. Кнопка видимая остается, но не реагирует на клик и всплывающее окно соответственно не выводится

[Aleksey Solovyev]

Alina1984, действительно.
1. Зачем Вы вешаете событие клик на всплывающее окно, а не на маркер (строка 80 в js)?


2. Если добавить outline к оберткам AdvancedMarkerElement, то можно заметить, что они перекрывают друг друга. Из-за этого у Вас не получится нажать на иконку после 1 пункта.


3. Либо переместите всплывающее окно выше (строка 131 js)

Либо поменяйте порядок добавления маркеров на карту (строки 53-91 js):


4. А чтобы закрыть всплывающее окно при клике по нему, можно добавить крестик (по аналогии со стандартным окном на карте) или каждый раз при его показе вешать обработчик клика для закрытия окна и удалять его после закрытия.

ps а вообще, используйте InfoWindow, который предназначен как раз для этих целей. Что-то такое: