Как убрать увеличение на 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 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru

Пишите, отвечу на любые вопросы.
E-mail: dmitriyribka@gmail.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *