Добрый день. Прошу помочь с возникшей ошибкой при работе маркера для отображения кастомного информационного окна для него.
Проблема состоит в том, что соответствующее информационное окно появляется не только при клике на маркер но и на область в которой она скрыта до клика.
По факту правильная работа предполагает, что информационное окно должно появляться только при клике на маркер. А закрываться либо при клике по информационному окну либо при клике на маркер.
<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
