Как убрать увеличение на google карте при скролле страницы

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