Как создать карту в конструкторе Яндекс Карт и вставить ее на сайт

Что такое Яндекс Карты

«Яндекс Карты» — это универсальный онлайн-сервис, который помогает быстро сориентироваться на местности: найти нужный адрес, построить маршрут на любом виде транспорта или отыскать ближайшие точки интереса. Ежедневно миллионы пользователей вводят поисковые запросы прямо на карте, а алгоритмы сервиса предлагают им оптимальные варианты в зависимости от местоположения и цели поиска.

Для бизнеса присутствие на «Яндекс Картах» — это бесплатный канал привлечения клиентов. Оформить карточку организации можно через сервис «Яндекс.Бизнес»: добавить актуальные контакты, ссылку на сайт, фотографии и описание. В результате компания начнет отображаться в поиске и на карте, а пользователи будут видеть, что нужный товар или услуга находятся совсем рядом.

Яндекс показывает в выдаче адреса, наиболее близкие и релевантные запросу клиента. Готовую карточку легко разместить и на своем сайте — достаточно вставить код виджета, и все данные из «Яндекс Карты» будут подтягиваться автоматически.

Зачем нужна карта «Яндекса» на сайте

Карта «Яндекса» на сайте помогает улучшить позиции компании в поисковой выдаче. Наличие актуальной карты с адресом и временем работы повышает доверие поисковой системы.

Если разместить карту в разделе «Контакты», пользователи сразу увидят ключевые данные и точку на карте. Это экономит их время и упрощает навигацию по сайту. Интерактивная карта дает дополнительный функционал — построение маршрута и расчет времени в пути. Для новых клиентов это особенно полезно: снижается риск ошибки с адресом, а визит планируется заранее.

При наличии нескольких филиалов можно отметить их все, чтобы клиент выбрал наиболее удобный — по расстоянию, маршруту или личным предпочтениям.

Как создать карту «Яндекса» в конструкторе: пошаговая инструкция

Для создания карты, которую вы потом встроите на сайт, зайдите в сервис «Конструктор карт Яндекса» через свой аккаунт или зарегистрируйтесь. Если у вас уже есть карта в сервисах «Яндекса», вы увидите ее в списке и сможете отредактировать перед добавлением на сайт. Если вы впервые в сервисе, увидите вот такое приглашение создать собственный картографический инструмент с метками, схемами проезда и т.д. Мы будем создавать с нуля, поэтому выбирайте функцию «Создать карту».

После перехода в рабочее пространство Конструктора открывается полный набор инструментов сервиса, которые легко освоить на практике.

Как сделать метку, линию и другие элементы на карте?

Основные инструменты — это метки и линии. Остальные функции используются для уточнения навигации и дополнительных пояснений.

Метки обозначают статичные объекты. Чаще всего маршрут строится между двумя такими точками. В описании метки можно добавить полезную информацию: телефон, график работы, ссылку на сайт.

Линии соединяют две или более меток. Если маршрутов несколько, можно выбрать разные стили линий, чтобы визуально различать варианты пути.Как нарисовать схему проезда или прохода до объекта

Сначала создайте новую карту: задайте ей название и краткое описание назначения. Это поможет быстро найти нужную карту, если их будет много.

Далее увеличьте масштаб так, чтобы на экране был виден объект, от которого начинается маршрут. В нашем примере построим схему прохода от метро «Тверская» до офиса Amiga. Для установки метки кликаем левой кнопкой мыши по нужному объекту и выбираем вид, цвет и иконку для метки. Так, у нас появился первый объект.

Теперь используем инструмент «Линии», чтобы показать передвижение клиента до офиса Amiga. 

Большой плюс таких карт в том, что после установки линий указывается точное расстояние между объектами.

Сохраняем линию маршрута и переходим к последнему шагу. Конечный этап в построении маршрута — метка офиса. Тоже можно поиграть с дизайном и выбрать интересный.

Смотрим, что получилось. Если все правильно, сохраняем и продолжаем.

После сохранения карты доступны два варианта ее использования: интерактивный и статический. Интерактивный формат подходит для встраивания на сайт — карту можно масштабировать, перемещать и рассматривать в деталях. Статический вариант используют для печати или в ситуациях, когда у пользователя медленное интернет-соединение и интерактивная версия может загружаться некорректно.

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

Получаем код для вставки на сайт:

Как добавить карту на сайт

Рекомендуем сначала обратиться к разработчикам сайта — они безопасно добавят блок для виджета и настроят адаптивность.

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