Как убрать увеличение на 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.

Если у вас возникли сложности с google картой или есть другие вопросы по вашему проекту, свяжитесь со мной по скайпу или напишите мне на почту

автор: Dmitriy

З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Email: dmitriyribka@gmail.com

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *