Размещаем адаптивную Google-карту на своем сайте

Категория: Хитрости html и др.
Просмотров: 1740

Шаг 1. Получаем код карты на Google Maps.

  • Открываем  Google Maps
  • Находим участок карты, который вы хотите разместить на своем сайте
  • Кликаем на ссылку «Поделиться»
  • В появившемся окне выбираем закладку «Код»
  • Выделяем код в текстом поле и копируем его

Шаг 2. Размещаем полученный код

  • Разместите полученный код на HTML-коде страницы вашего сайта. Это будет выглядеть приблизительно так:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d143494.86491623629!2d38.8346975935457!3d55.80873818252006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x414b1c7e8e89e903%3A0x2489581359276ac7!2z0J7RgNC10YXQvtCy0L4t0JfRg9C10LLQviwg0JzQvtGB0LrQvtCy0YHQutCw0Y8g0L7QsdC7Lg!5e0!3m2!1sru!2sru!4v1452761646368" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Шаг 3. Изменяем полученный код

  • Создайте HTML-элемент <div> с классом map-responsive и разместите внутри него код для показа карты. В результате получим:
<div class="map-responsive">


<iframe src="/https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d143494.86491623629!2d38.8346975935457!3d55.80873818252006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x414b1c7e8e89e903%3A0x2489581359276ac7!2z0J7RgNC10YXQvtCy0L4t0JfRg9C10LLQviwg0JzQvtGB0LrQvtCy0YHQutCw0Y8g0L7QsdC7Lg!5e0!3m2!1sru!2sru!4v1452761646368" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Шаг 4. Добавляем CSS

  • Сейчас нам нужно добавить следующие CSS-правила в файл стилей вашего сайта.
.map-responsive{overflow:hidden;padding-bottom:56.25%;position:relative;height:0;}
.map-responsive iframe{left:0;top:0;height:100%;width:100%;position:absolute;}

Все. Теперь ваша карта стала адаптивной. Чтобы убедиться в этом попробуйте изменить размер окна браузера: растянуть или уменьшить его.