Когда мы делаем продающие страницы (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.