Как встроить

Как сделать встраиваемые карты Google адаптивными


Чтобы встроить Карты Google в свои веб-страницы, нужно выполнить два простых шага. Находясь на веб-сайте Google Maps, увеличьте масштаб до области, которую вы хотите встроить, щелкните значок шестеренки в нижнем левом углу и выберите в меню опцию «Встроить карты».
Эта веб-страница содержит образец карты, встроенной с использованием кода встраивания по умолчанию, предоставленного Google Maps. Встроенная карта не отвечает. Это означает, что если вы открываете страницу не на настольном компьютере, а на другом устройстве, карта Google не умещается на экране, и вам придется прокручивать страницу по горизонтали, чтобы увидеть полную карту.
Вот еще одна веб-страница, которая содержит ту же карту Google, но теперь карта встроена адаптивно. Таким образом, если вы измените размер браузера или просматриваете страницу на небольшом устройстве, встроенная карта автоматически изменит свой размер в зависимости от размера вашего экрана.

Как встроить Google Maps отвечает ответственно

Это код встраивания по умолчанию для новых карт Google:


Как указано в параметрах высоты и ширины кода внедрения, высота по умолчанию для средних вложений составляет 450 пикселей или 75% ширины по умолчанию (600 пикселей).
Если вы хотите преобразовать эту статическую размеров Google Google в то, что является отзывчивым, все, что вам нужно сделать, это добавить несколько правил CSS на вашу веб-страницу и обернуть встроенные Iframe внутри этих правил.
Новый код внедрения с адаптивным стилем будет примерно таким. Вы можете изменить значение padding-bottom (строка № 4) с 75% на что-то для другого соотношения сторон.


Аналогичный метод можно использовать для адаптивного встраивания видео и фотографий из Instagram.