Скрытие карты Google Maps и её показ только после нажатия на кнопку
gegelga(12 месяцев назад)
Снова интересный код написал для своего сайта, которым бы хотелось с вами поделиться, кому интересно пользуйтесь.
В чём заключается идея, карта Гоогле активна только после того когда пользователь подтвердит её показ, нажав на кнопку Google Maps показать.
Что нужно сделать:
Вставляем этот скрипт перед </body>, незабываем ссылку ифраме на Карту поменять на вашу.
<script> var mapContainer = document.getElementById('mapContainer');
var mapConsentBtn = document.getElementById('mapConsentBtn');
var mapIframe = document.getElementById('mapIframe');
var consentGiven = localStorage.getItem('mapConsent');
// Überprüfe, ob die Einwilligung bereits erteilt wurde
if (consentGiven) {
showMap();
}
mapConsentBtn.addEventListener('click', function() {
// Speichere die Einwilligung in den Local Storage
localStorage.setItem('mapConsent', true);
showMap();
});
function showMap() {
mapContainer.classList.add('showIframe');
mapIframe.src = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2458.3402739650037!2d8.51597881607021!3d51.96422098501948!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47ba3b6348009e93%3A0x82dfecfdf96d786c!2sBreipohls%20Hof%204%2C%2033659%20Bielefeld!5e0!3m2!1sde!2sde!4v1625413116863!5m2!1sde!2sde";
}
</script>
Размещаем карту в нужном нам месте в шаблоне
<div id="mapContainer"> <div class="mapOverlay">
<button id="mapConsentBtn">Google Maps показать</button>
</div>
<iframe id="mapIframe" src="" height="200" style="border:0; padding-top:15px;width:100%" allowfullscreen="" loading="lazy"></iframe>
</div>
А так же размещаем стили в шаблоне или же в отдельном файле:
#mapContainer { position: relative;
height: 200px;
width: 100%;
}
.mapOverlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
#mapConsentBtn {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#mapIframe {
display: none;
}
#mapContainer.showIframe #mapIframe {
display: block;
}
#mapContainer.showIframe .mapOverlay {
display: none;
}
/* Anpassungen für mobile Geräte */
@media only screen and (max-width: 600px) {
#mapContainer {
height: 150px;
}
#mapConsentBtn {
padding: 8px 16px;
font-size: 14px;
}
}
Пользуйтесь и не забудьте указать при пользовании обратную ссылку на мой сайт https://bi-verleih.de/
Вернуться назад к другим темам