Главная » Вебмастеру » Google maps iframe — убрать увеличение карты при прокрутке страницы колесиком мышки

Google maps iframe — убрать увеличение карты при прокрутке страницы колесиком мышки

2017-07-19 / Вр:08:48 / просмотров: 3626

Однажды в одном из моих заказов мне нужно было вывести Гугл карту на всю ширину страницы сайта. Кстати, если вы не знаете, как установить на сайт Google maps, читайте как раз об этом статью здесь.
Так вот, все было прекрасно, до того момента, когда нужно было прокручивать колесико мышки до футера (подвал сайта). То есть, как только курсор мышки заходил на карту, то ниже карты (к футеру) уже спуститься нельзя было. Прокручивание колесика просто увеличивало или обратно уменьшало карту.
Если вы столкнулись с такой же ситуацией, то предлагаю попробовать исправить ситуацию.
Советую карту сделать неактивной для колесика мышки, но если нужно будет пользователю поработать с картой, то при клике по ней она активируется и тогда можно увеличивать и уменьшать ее масштаб.

Итак, вот сам код карты:

<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d80419.74645913772!2d28.559540059939074!3d50.95853960663318!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x472bdb0e59f0f0d1%3A0x59ae94f2d8f93b38!2z0JrQvtGA0L7RgdGC0LXQvdGMLCDQltC40YLQvtC80LjRgNGB0LrQsNGPINC-0LHQu9Cw0YHRgtGM!5e0!3m2!1sru!2sua!4v1500295457352" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Обязательно в коде должна быть строка №1
И вот такой код вставляем в CSS:

.overlay
{
background:transparent;
position:relative;
width:100%;
height:550px;
top:550px;
margin-top:-550px;
}

Ну, смотрим, что получилось?
Попробуйте провести колесиком мышки по карте, она не будет активна, но если вы на нее кликните мышкой, то сможете смело с помощью колесика менять масштаб, перетягивать карту и т. д.