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

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

(Disable mouse scroll wheel zoom on embedded Google Maps)
При прокрутке страницы колесиком мышки, когда курсор попадает на карту, вместо прокрутки далее страницы вниз происходит увеличение карты (особенно если карта на всю ширину страницы).
Как убрать?
Перед iframe добавляем div:

<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1998.5192766409587!2d30.2653292!3d59.940118700000006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x469631284de3a6fb%3A0x17f2808218507f5a!2zMTYt0Y8g0LvQuNC90LjRjywg0KHQsNC90LrRgi3Qn9C10YLQtdGA0LHRg9GA0LM!5e0!3m2!1sru!2sru!4v1438004309074" width="100%" height="550" frameborder="0" style="border:0" allowfullscreen></iframe>

Стиль:

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

И если пользователь все-таки решил работать с картой — при клике на блок, который появился поверх карты — убираем его:

$(document).ready(function(){
	$('.overlay').click(function() {
		$(this).remove();
	});
});

Правильнее всего конечно для этого случая рисовать карту через API с параметром scrollwheel:false, но, бывает, нужно решение именно для фрейма.

Categories: Javascript Tags:
  1. attic1984
    24 июля,2017 в 20:58 | #1

    все работает, спасибо Автору (:

  2. виктор
    3 июня,2017 в 11:21 | #2

    спасибо, отец!

  3. Роман
    22 января,2017 в 19:46 | #3

    Друзья, блин месяц искал как сделать в фрейме!
    Огроооомное спасибо!

    Заработало
    .overlay {
    background: transparent;
    position: absolute;
    width: 100%;
    height: 550px;
    top: 0px;
    }
    А главное что при клике карта работает, тащусь от радости :)

  4. Konstantin Krylov
    20 января,2017 в 18:51 | #4

    @Denius Coder
    в таком случае все это нужно разместить в блоке с position relative

  5. Denius Coder
    20 января,2017 в 14:51 | #5

    Стиль не правильный!
    Вот так должно быть:

    .overlay {
        background: transparent;
        position: absolute;
        width: 100%;
        height: 550px;
        top: 0px;
    }

    И скрипт на jQuery не нужен, так как обработчик события

    onClick="style.pointerEvents='none'"

    прекрасно срабатывает и так!

  6. Николай
    29 ноября,2016 в 15:31 | #6

    Спасибо, реально помог

  7. Константин
    16 октября,2016 в 14:34 | #7

    Вы лучшие) СПС ребят)

  8. Алексей
    1 июля,2016 в 14:34 | #8

    Большое спасибо, все работает. Хотя вот этот код я не писал никуда:
    $(document).ready(function(){
    $(‘.overlay’).click(function() {
    $(this).remove();
    });
    });
    он важен ?

  9. Антон
    31 мая,2016 в 01:39 | #9

    Спасибо!
    долго гуглил, но нормальная подсказка только у вас!
    У меня работает кстати без джава скрипт куска, не знаю почему

  10. Олег
    12 апреля,2016 в 17:37 | #10

    Не помогло.
    Кто знает — почему — хелп плиз.
    Кэш брузера чистил.
    Код оставляю на сайте.

  11. krill
    24 марта,2016 в 20:12 | #11

    спасибо…..всё просто и понятно

  12. Konstantin Krylov
    17 февраля,2016 в 20:37 | #12

    @Александр
    Здесь нет php. При добавлении последнего блока javascript при клике на карту она станет активной.

  13. Александр
    15 февраля,2016 в 22:44 | #13

    Спасибо.Функцию php я не добавлял,так как не понял куда.Возник вопрос.Карта теперь не меняется.Но хотелось бы чтоб можно было переходить по ссылке на гугл карту.А она теперь не активна.

  14. Alex
    18 декабря,2015 в 16:12 | #14

    Спасибо. Реально помогло

Похожие публикации