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

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

Зачем вам интерактивная карта

Яндекс Карты используют в маркетинговых целях. Организации отмечают на них филиалы, указывают контактные данные, время работы, получают отзывы. Так клиенты могут быстро найти подходящую точку продаж или заведение.

У масштабируемой карты есть функции:

• поиск учреждений по адресам;
• обзор панорам;
• просмотр фотографий;
• проверка пробок;
• построение маршрутов;
• снимки со спутников;
• размещение на внешних ресурсах.

Фрагмент местности со зданием вашей компании отображается прямо на странице сайта или мобильного приложения. Существует несколько форматов кар:

• Интерактивная. С ней можно взаимодействовать: перемещать, изменять масштаб.
• Статическая. Карта отображается на странице в виде скриншота.
• Печатная. Можно сохранить изображение в высоком разрешении для печати на носителе. 

Первыми двумя типами можно делиться с другими пользователями.

Наиболее привычное и понятное расположение карты — это раздел «Контакты». Там пользователь ожидает увидеть адреса, телефоны и почту для связи. Компании указывают свое местоположение и в сервисе Яндекс Бизнес — он позволяет работать с картами и добавлять информацию об организации.

Помимо карты, на сайт можно установить виджеты Calltouch. Обратный звонок, сбор заявок в нерабочее время и возможность связаться через удобные мессенджеры или соцсети увеличат конверсию и продажи.

Инструкция по созданию

Сделать Яндекс Карту и разместить ее на сайте можно как вручную, так и с помощью плагинов.

Авторизуйтесь в Яндексе и перейдите в конструктор карт. Если у вас уже есть ранее созданные карты, вы увидите их список. В нем можно выбрать существующую — отредактировать, скопировать и поделиться — или создать новую. Также карты можно импортировать из файла.

Создайте объекты. В интерфейсе есть несколько видов:

• Метки. Обозначают конкретные локации — пункт назначения или промежуточную точку на пути. Это может быть магазин, центральный офис, филиал, место для посадки в транспорт. Кликните на нужное здание, заполните название и описание локации. Задайте цвет, тип и иконку. Нажмите на кнопку «Готово», чтобы сохранить метку.

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

• Многоугольники. Обозначают дома или территории. Если офис расположен в промзоне, в которой легко заблудиться, вы можете отметить свое здание многоугольником. Дважды кликните на пространство рядом и обведите территорию. Добавьте в открывшемся поле подсказку.

Включите отображение пробок. Если вашим гостям важна обстановка на дорогах, активируйте опцию «Пробки» в верхней панели.

Выберите тип карты. Они указаны в ниспадающем меню раздела «Слои». Варианты:

• Схема — нарисованный план местности с условными обозначениями.
• Спутник — карта-снимок из космоса.
• Гибрид — спутниковые снимки с надписями.

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

Маркетинг

Читайте также:

Реферальный маркетинг: что это такое и как он работает

Реферальный маркетинг: что это такое и как он работает

Опубликуйте карту. Передайте код программистам или расположите его в любой части сайта самостоятельно. Например, чтобы добавить карту под заголовком, вставьте ее после тега <h1>.

В CMS используйте готовые плагины и модули — их полный список есть в информационной справке Яндекса. 

При подключении API загружайте карту через модули. Полная сборка API Яндекс Карт и необходимые инструменты для работы можно найти в package.full. 

Некоторые CMS и конструкторы сайтов имеют функцию вставки карты. Например, в Tilda это один из блоков в боковом меню.

Чтобы вставить карту на сайт на WordPress:

1. Зайдите в административную панель и выберите раздел «Страницы».
2. Кликните на «Контакты», а затем — «Изменить».
3. Поменяйте в редакторе режим «Визуально» на «Текст».
4. В конструкторе Яндекс Карт для сайта скопируйте код iframe и вставьте его вниз страницы.
5. Нажмите «Обновить».

На лендингах карту размещают в подвале сайта. Для этого сгенерируйте в конструкторе HTML код карты и выполните аналогичные действия. Пройдите: «Внешний вид» → «Редактор» → «Подвал». Вставьте HTML код.

Чтобы оценить эффективность рекламных каналов, подключите Сквозную аналитику Calltouch и не тратьте время на рутинные задачи. Вы узнаете, что приносит вам целевой трафик и доход. Сервис собирает все сведения с сайта, социальных сетей, CRM и экономит время сотрудников на составление отчетов.

Карта с несколькими адресами

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

Готовую карту с несколькими адресами сохраните и вставьте на сайт.

Настройка отложенной загрузки

Карты достаточно «тяжелые» — могут замедлять отображение страницы. Чтобы этого избежать, настройте отложенную загрузку (lazy load):

• по доскроллу — если карта размещена внизу страницы;
• по наведению курсора;
• по касанию на экране смартфона.

Для этого в коде прописывают событие полной загрузки страницы — ‘DOMContentLoaded’. Затем — используют метод setTimeout и выставляют продолжительность задержки (в миллисекундах) до вызова карты. Получается строка:

setTimeout(initYandexMap, Время задержки)

После прописывают активности пользователя:

• document.addEventListener(‘scroll’, initYandexMapOnEvent);
• document.addEventListener(‘mousemove’, initYandexMapOnEvent);
• document.addEventListener(‘touchstart’, initYandexMapOnEvent) и загружают карту.

Заключение

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