BloGGood.ru

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

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

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

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

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

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

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

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

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

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

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

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

;-) :| :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]

Метки: ,

Мои цели на 2018-2019:

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

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

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

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

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

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

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

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