Скрытие карты 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/

Вернуться назад к другим темам