Яндекс Карты — сервис, который позволяет работать с интерактивными картами в браузере. Он уточняет местоположение компании и помогает клиентам найти ее. Рассказываем, как вставить Яндекс Карту на сайт.
Яндекс Карты используют в маркетинговых целях. Организации отмечают на них филиалы, указывают контактные данные, время работы, получают отзывы. Так клиенты могут быстро найти подходящую точку продаж или заведение.
У масштабируемой карты есть функции:
Фрагмент местности со зданием вашей компании отображается прямо на странице сайта или мобильного приложения. Существует несколько форматов кар:
Первыми двумя типами можно делиться с другими пользователями.
Наиболее привычное и понятное расположение карты — это раздел «Контакты». Там пользователь ожидает увидеть адреса, телефоны и почту для связи. Компании указывают свое местоположение и в сервисе Яндекс Бизнес — он позволяет работать с картами и добавлять информацию об организации.
Помимо карты, на сайт можно установить виджеты Calltouch. Обратный звонок, сбор заявок в нерабочее время и возможность связаться через удобные мессенджеры или соцсети увеличат конверсию и продажи.
Сделать Яндекс Карту и разместить ее на сайте можно как вручную, так и с помощью плагинов.
Авторизуйтесь в Яндексе и перейдите в конструктор карт. Если у вас уже есть ранее созданные карты, вы увидите их список. В нем можно выбрать существующую — отредактировать, скопировать и поделиться — или создать новую. Также карты можно импортировать из файла.
Создайте объекты. В интерфейсе есть несколько видов:
Включите отображение пробок. Если вашим гостям важна обстановка на дорогах, активируйте опцию «Пробки» в верхней панели.
Выберите тип карты. Они указаны в ниспадающем меню раздела «Слои». Варианты:
Сохраните карту. Когда она будет готова, добавьте в поля слева название и описание. Нажмите на «Сохранить и продолжить» внизу страницы. Выберите формат — интерактивный, статический или печатный. Получите код, чтобы разместить на сайте.
Защищено: Тест: все блоки
Опубликуйте карту. Передайте код программистам или расположите его в любой части сайта самостоятельно. Например, чтобы добавить карту под заголовком, вставьте ее после тега <h1>.
В CMS используйте готовые плагины и модули — их полный список есть в информационной справке Яндекса.
При подключении API загружайте карту через модули. Полная сборка API Яндекс Карт и необходимые инструменты для работы можно найти в package.full.
Некоторые CMS и конструкторы сайтов имеют функцию вставки карты. Например, в Tilda это один из блоков в боковом меню.
Чтобы вставить карту на сайт на WordPress:
На лендингах карту размещают в подвале сайта. Для этого сгенерируйте в конструкторе HTML код карты и выполните аналогичные действия. Пройдите: «Внешний вид» → «Редактор» → «Подвал». Вставьте HTML код.
Чтобы оценить эффективность рекламных каналов, подключите Сквозную аналитику Calltouch и не тратьте время на рутинные задачи. Вы узнаете, что приносит вам целевой трафик и доход. Сервис собирает все сведения с сайта, социальных сетей, CRM и экономит время сотрудников на составление отчетов.
Если ваша компания работает по двум и более адресам, создайте карту для каждого. Выберите инструмент «Метки» и укажите название и описание первой локации. Вторую и последующие настройте аналогично. Измените цвет меток, чтобы различать их, и сделайте карту интерактивной — так пользователи смогут приблизить нужную точку и посмотреть маршрут.
Готовую карту с несколькими адресами сохраните и вставьте на сайт.
Карты достаточно «тяжелые» — могут замедлять отображение страницы. Чтобы этого избежать, настройте отложенную загрузку (lazy load):
Для этого в коде прописывают событие полной загрузки страницы — ‘DOMContentLoaded’. Затем — используют метод setTimeout и выставляют продолжительность задержки (в миллисекундах) до вызова карты. Получается строка:
setTimeout(initYandexMap, Время задержки)
После прописывают активности пользователя:
Проблема может быть в скорости интернета или «тяжести» элементов ресурса. Проверьте производительность сайта и настройте отложенную загрузку карты. Если изменений нет, обратитесь в службу поддержки сервиса.
Да. В разделе «Метки» выберите указатель и разместите его над всеми нужными вам локациями. Добавьте описание.
Хочу получать интересные новости блога
24 мая 2022
22 мая 2022
25 мая 2022
27 мая 2022
31 мая 2022
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных