Когда мы делаем продающие страницы (landing page), возникает ситуация делать блоки на всю ширину экрана. При использовании гугл карт есть один минус — когда мы прокручиваем страницу у нас увеличивается карта. Рассмотрим пример как это можно избежать.
Как сделать чтобы карта не увеличивалась когда мы прокручиваем страницу, например на тачпаде ноутбука.
Обернем наш код в блок с классом map-block, внутри разместите код с вашей картой:
<div class="map-block"> <!-- Код google maps --> </div>
Подключаем jQuery и пишем код:
<script>
//google maps
$('.map-block').on('click', function () {
$('.map-block iframe').css("pointer-events", "auto");
});
$( ".map-block" ).on('mouseenter, mouseleave', function() {
$('.map-block iframe').css("pointer-events", "none");
});
</script>
Используются события mouseenter и mouseleave и добавляется CSS свойство pointer-events, которое предотвращает события мыши и щелчки по элементу, в нашем случае это iframe.
