Адаптация интерактивной карты Яндекса для сайта под ширину мобильного экрана

Адаптация интерактивной карты Яндекса

Часто на странице контактов размещается интерактивная карта местности (объекта). Рассмотрим адаптивное размещение Яндекс карты на сайте.

Размещение интерактивной карты Яндекс на сайте.

1. Заходим на сервер Яндекс карты: Yandex Maps.
2. Находим в поиске (верхний левый угол) необходимый объект, город, улицу.

Адаптация интерактивной карты Яндекса

Выбираем в меню (правый верхний угол) тип карты и пункт поделиться, см. рисунок ниже.

Адаптация интерактивной карты Яндекса

3. Копируем код и вставляем в указанное в шаблоне место

Адаптация интерактивной карты Яндекса


Копируемый код выглядит примерно так:
<iframe src="https://yandex.ru/map-widget/v1/-/CGDGFH0U" width="560" height="400" frameborder="1" allowfullscreen="true"></iframe>

При размещении кода на странице под управлением Bootstrap параметр frameborder="1" не обязателен, он будет перебит значениями фреймворка.
Размеры ширины и высоты окна карты у нас указаны в файле style.css, поэтому параметр width="560" и height="400" тоже не обязательны, т.е код карты Яндекс можно сократить до минимального значения:
<iframe src="https://yandex.ru/map-widget/v1/-/CGDGFH0U" allowfullscreen="true"></iframe>

При использовании Bootstrap к параметрам фрейма (iframe) необходимо добавить class="img-fluid", т.е. теперь наша конструкция примет вид:
<iframe src="https://yandex.ru/map-widget/v1/-/CGDGFH0U" allowfullscreen="true" class="img-fluid"></iframe>

При размещении карты на сайте без использования фреймворка Bootstrap, значения стиля в файле style.css обязательны. Пример можно скачать ниже.

Аналогично можно поступать с картой Google Maps, подробнее на странице "Разместить карту местности Google на сайте".

Пример готового решения с применением Bootstrap 4.3.1 и без него скачайте ниже. В архиве имеется готовая html страница, файл style.css и сам фреймворк bootstrap4.3.1.min.css

В коде html странице и файле стилей прописаны подробные комментарии для разных вариантов применения карты.

Скачать пример размещения адаптивной карты Яндекс на сайте: Yandex-Maps.zip [396,88 Kb] (cкачиваний: 2)

Автор: Saah | Просмотров: 28 | 22-10-2019,Вт, 09:15  

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

@
Похожие публикации