Измените язык, если вам нужно работать с Топвизором на другом языке. Язык интерфейса можно изменить в любое время в настройках аккаунта. Измените язык, если вам нужно работать с Топвизором на другом языке. ru Русский Выбрать
SEO-кухня SEO-кухня 15.12.2023

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

Карты — самый простой и быстрый способ визуализировать адрес компании в разделе «Контакты» на сайте. Они помогают посетителям страницы быстро сориентироваться и построить маршрут до точки без перехода на сторонние сервисы. Рассказываем, как вставить карту на сайт через сервисы Яндекс, Google и 2GIS.

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

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

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

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

Салон красоты показывает своё местоположение на карте
Салон красоты показывает своё местоположение на карте

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

❗ Встроенная карта может по‑разному повлиять на юзабилити сайта

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

Подробнее о том, как работать с юзабилити сайта, читайте в нашей статье.

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

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

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

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

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

Раздел, куда нужно перейти, чтобы скопировать код карты
Раздел, куда нужно перейти, чтобы скопировать код карты

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

Ссылка на карту и виджет карты в Яндекс Картах
Ссылка на карту и виджет карты в Яндекс Картах

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

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

Конструктор карт от Яндекса
Конструктор карт от Яндекса

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

Поля для ввода данных о компании
Поля для ввода данных о компании

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

Код для вставки карты на сайт
Код для вставки карты на сайт

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

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

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

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

Кнопка «Поделиться» в Google Картах
Кнопка «Поделиться» в Google Картах
Код для размещения карты на сайте
Код для размещения карты на сайте

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

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

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

Создание новой карты в Google Картах
Создание новой карты в Google Картах

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

Панель редактирования карты в Google Картах
Панель редактирования карты в Google Картах

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

Ссылка на карту в Google Картах
Ссылка на карту в Google Картах

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

Кнопка для вставки карты на сайт
Кнопка для вставки карты на сайт

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

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

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

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

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

Конструктор карт от 2GIS
Конструктор карт от 2GIS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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