Когда мы делаем продающие страницы (landing page), возникает ситуация делать блоки на всю ширину экрана. При использовании гугл карт есть один минус — когда мы прокручиваем страницу у нас увеличивается карта. Рассмотрим пример как это можно избежать.
Как сделать чтобы карта не увеличивалась когда мы прокручиваем страницу, например на тачпаде ноутбука.
Обернем наш код в блок с классом map-block, внутри разместите код с вашей картой:
|
1 2 3 |
<div class="map-block"> <!-- Код google maps --> </div> |
Подключаем jQuery и пишем код:
|
1 2 3 4 5 6 7 8 9 10 |
<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.
