Яндекс Карта на сайте: как добавить и что показать

Зачем карта на сайте

• Показать, где вы, — особенно если вход со двора, в торговом центре или за шлагбаумом.
• Проложить маршрут в один клик — в Яндекс Картах или Навигаторе.
• Добавить доверия: настоящий адрес, который можно проверить.

Нужна карта не всем. Онлайн-сервису или магазину без самовывоза хватит адреса в реквизитах.

Способ первый: конструктор карт

1. Откройте конструктор Яндекс Карт и войдите с Яндекс ID.
2. Найдите свой адрес и поставьте метку с названием компании.
3. Выберите размер карты и сохраните её.
4. Нажмите «Получить код карты», выберите вариант кода — JavaScript или iframe — и вставьте его в страницу там, где должна стоять карта.

Ключ API для карты из конструктора не нужен. Кроме интерактивной карты, конструктор делает статическую — обычную картинку: она почти ничего не весит, но её нельзя двигать и приближать. Учтите: на картах из конструктора и в виджетах Яндекс может показывать рекламные баннеры, а отключить их можно только на платном тарифе API.

Способ второй: виджет из Яндекс Карт

Если у компании есть карточка в Яндекс Картах, найдите её, откройте меню «Поделиться» и скопируйте код из поля «Виджет с картой». На сайте появится карта с вашей организацией. Так же можно вставить карту с готовым маршрутом — например, от метро до входа.

Способ третий: ссылка вместо карты

Если карта на странице не нужна, а маршрут нужен, поставьте ссылку на карточку компании в Яндекс Картах или кнопку «Построить маршрут». Это самый лёгкий вариант: страница не грузит лишнего, а человек сразу попадает в приложение, где у него и навигатор, и отзывы.

Для разработчиков: JavaScript API

Если нужно больше, чем одна метка, — филиалы со списком, свой стиль карты, фильтры, — разработчик собирает карту через JavaScript API Яндекс Карт. Для него нужен ключ разработчика. Бесплатно API можно использовать на сайтах, открытых для всех, и в пределах суточных лимитов — например, 1 000 запросов к геокодеру в день. Для остального есть платные тарифы.

Отзывы с Яндекс Карт на сайте

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

Такие отзывы — независимый источник: их нельзя отредактировать, поэтому им доверяют больше, чем отзывам на самом сайте. Как ещё показывать отзывы, — в статье «Отзывы на сайте», а о карточке компании — «Яндекс Бизнес и сайт».

На Тильде

В Тильде есть готовые блоки с картой, но для карт Яндекса нужен свой ключ JavaScript API. Его получают в кабинете разработчика Яндекса, в ограничениях ключа указывают домен сайта и домен Тильды, а сам ключ вставляют в настройках сайта в раздел «Ещё» → «Ключи от API карт». Пошагово это описано в справке Тильды.

Если возиться с ключом не хочется, код из конструктора Яндекс Карт можно вставить в блок для своего HTML-кода: ключ ему не нужен.

Что показать рядом с картой

• Адрес текстом — его можно скопировать, и его читают поисковики.
• Как найти вход: ориентиры, этаж, подъезд, фото входа.
• Парковка и общественный транспорт.
• Часы работы и телефон — чтобы не ехать в закрытый офис.
• Кнопка «Построить маршрут» — на телефоне это удобнее, чем двигать карту пальцем.

Карта и скорость

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

Как это делаем мы

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