Как сделать адаптивную Яндекс карту на лендинге

Как сделать адаптивную Яндекс карту Добрый день. Сегодня хочу написать небольшую заметку о том, как сделать Яндекс карту адаптивной. Часто спрашивают о том, как это реализовать на landing page, вот и будет готовый материал.

На самом деле, это достаточно легко реализуется. В самом простом случае, после получения скрипта от конструктора карт (О том, как создать свою карту, можно почитать в этой статье), нам достаточно заменить фиксированное значение ширины и высоты, которое было задано в пикселях, на значение в процентах.

Было:

<script type="text/javascript" charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=Fjkc9H0g3D7KykHB9pdznEWUplxAbBRv&width=371&height=240&lang=ru_UA&sourceType=constructor"></script>

Где height=240 - высота, а width=371 - ширина.

Для того, чтобы сделать карту адаптивной (по ширине), нам достаточно написать так: width=100%. То есть получится так:

<script type="text/javascript" charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=Fjkc9H0g3D7KykHB9pdznEWUplxAbBRv&width=100%&height=240&lang=ru_UA&sourceType=constructor"></script>

Но это был лишь самый простой случай, часто, наша карта помещается в специальный div, например, с классом map, который имеет определенные размеры.

Это необходимо для того, чтобы была возможность удобно управлять блоком при помощи медиазапросов. В таком случае задаем скрипту ширину и высоту 100%, а размер карты на разных устройствах регулируем при помощи изменения стилей блока, в который помещена наша карта.

Как я уже говорил, при помощи медиазапросов, мы легко сможем сделать Яндекс карту адаптивной.

3 комментария

  1. Павел

    Спасибо за совет! Как думаете, при адаптивной верстке для смартфонов стоит подгружать Яндекс карту или лучше заменить ее просто на изображение?

    1. dimadv7

      Здравствуйте, я бы оставил Яндекс Карту из-за ее интерактивности. Сразу можно посмотреть как проехать и т.д. Но все, конечно же, зависит от задач, и актуальности.

  2. Vladimir

    Спасибо

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