Как добавить и использовать интерактивные карты на сайте

Что такое интерактивные карты и для чего нужны

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

Карта на сайте помогает проще представить местонахождение офиса относительно его дома или работы, построить маршрут. Это удобнее, чем если компания просто укажет на сайте адрес. Поэтому добавлять карты на сайт стоит любым брендам с офлайн‑точками: салонам красоты, магазинам или ресторанам.

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

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

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

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

Карта с уже существующей меткой

Вы можете вставить на сайт уже существующую метку в Яндекс Картах. Чтобы это сделать, зайдите в Карты, найдите в поиске свою компанию и выберите значок с тремя точками в панели справа.

Нажмите «Поделиться» и скопируйте код для вставки в блоке «Виджет с картой». Его нужно вставить в код сайта, в конструктор или CMS сайта в тело страницы с контактами. Если сайтом занимается программист, достаточно передать ему код, и он установит его в нужное место.

Создание своей метки

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

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

После заполнения данных нажмите «Сохранить и продолжить». Вы сможете выбрать масштаб карты, в котором клиенты будут видеть ее на сайте, и получить код для вставки на сайт. Код нужно встроить в тело страницы «Контакты» через конструктор, CMS или HTML‑код страницы.

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

Установка Google‑карты на сайт похожа на установку Яндекс Карты.

Карта с уже существующей меткой

Если у вас уже есть адрес в Google Картах, зайдите в Карты и найдите в поиске адрес организации. Затем нажмите кнопку «Поделиться» в левой панели и выберите раздел «Встраивание карт».

Скопируйте готовый HTML‑код и вставьте его в тело страницы с контактами.

Создание своей метки

Если у вас нет метки на Google Картах, вы можете создать собственную карту в конструкторе. Зайдите в Google My Maps и нажмите «Создать новую карту».

Введите в строке поиска адрес компании, выберите точку и отредактируйте название объекта. Также введите описание, которое поможет клиентам больше узнать о вас. Например, укажите график работы или номер офиса.

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

Перейдите по сгенерированной ссылке и проверьте, правильно ли вы создали карту. Затем нажмите на три точки и выберите в меню раздел «Добавить на сайт».

Скопируйте код сайта и вставьте его в тело страницы контактов через CMS, конструктор или HTML‑код сайта.

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

Сервис 2GIS даёт возможность разместить свою карту на сайте. Рассказываем, как это сделать.

Создание карты со своей меткой

Чтобы разместить карту на сайте с помощью сервиса 2GIS, перейдите в бесплатный конструктор, введите адрес компании и впишите название точки. Также добавьте дополнительные данные в описание — часы работы или номер офиса. Затем нажмите на кнопку «Получить код» и скопируйте для вставки на сайт.

Интеграция карты через API

2GIS предлагает возможность интеграции карт через API. Это платный инструмент, который дает доступ к детализированным картам. Интеграция через API от 2GIS создана для больших сервисов и больших объемов визуальных данных. Небольшим компаниям будет достаточно подключения карты через бесплатный редактор.

Узнать больше об API для карт можно на сайте 2GIS.

Как менять отображение карты на сайте

Если карта утратила актуальность для сайта (например, бизнес перешел в онлайн), ее можно убрать. Для этого нужно найти в настройки CMS или конструктора, в котором карта была добавлена изначально.

Убрать карту через HTML еще проще: достаточно удалить добавленный ранее код.

Так как карта подключается через сторонние сервисы, она может замедлять работу сайта и портить показатели Core Web Vitals. Чтобы этого не допустить, настройте отложенную загрузку карты.

Что запомнить

• Карта на сайте помогает пользователям лучше понять местоположение компании.

• Полезно устанавливать карты, если у вас офлайн‑бизнес: магазин, салон красоты или ресторан.

• Вы можете установить карту на сайт через Яндекс, Google или 2GIS. При этом не обязательно иметь подтвержденную страницу бизнеса в Картах.

Что ещё почитать

Что такое фавикон и как его создать самостоятельно

Анкорная или безанкорная ссылка? Как выбрать

Хлебные крошки: что это такое и как их сделать на сайте