Как известно, размещение карты Google на своем сайте довольно простая задача. Однако, по-умолчанию, карта не адаптируется под размер экрана.
В этой коротенькой заметке, автор поделится способом решения этой проблемы. Для этого нам мы добавим несколько строк CSS-кода. Вы можете воспользоваться этим методом, если ваш сайт работает под управлением различных систем управления содержимым. Например: Joomla, WordPress, Drupal и т. п.
Шаг 1. Получаем код карты на Google Maps.
- Открываем Google Maps
- Находим участок карты, который вы хотите разместить на своем сайте
- Кликаем на ссылку «Поделиться»
- В появившемся окне выбираем закладку «Код»
- Выделяем код в текстом поле и копируем его
Шаг 2. Размещаем полученный код
Разместите полученный код на HTML-коде страницы вашего сайта. Это будет выглядеть приблизительно так:
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 и разместите внутри него код для показа карты. В результате получим:
HTML
<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>
</div>
Шаг 4. Добавляем CSS
Сейчас нам нужно добавить следующие 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;
}
Все. Теперь ваша карта стала адаптивной. Чтобы убедиться в этом попробуйте изменить размер окна браузера: растянуть или уменьшить его.
Оригинал статьи - https://www.ostraining.com/blog/coding/responsive-google-maps/
