BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

Однажды в одном из моих заказов мне нужно было вывести Гугл карту на всю ширину страницы сайта. Кстати, если вы не знаете, как установить на сайт 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;
}

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

  1. Алдександр

    Приветствую Степан !! Благодарю за действительно полезный пост ! Как раз занимался этим вопросом и твой пост как нельзя к стати пришелся. :arrow:

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Александр! Рад, что моя статья была полезной :arrow:
    Заходите по чаще!

    Ответить

  2. МАКСИМ МАТВЕЕВ

    Отлично, спасибо за коды, возьму на заметку. А так вообще то сталкивался с такой ситуацией.

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 773
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4255