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