Нет времени читать?
Отправить статью на почту

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

25 мая 2022
10 мин на чтение
17361
Как создать и вставить карту Яндекс на сайт
author__photo

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

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

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

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

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

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

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

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

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

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

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

Виджеты
Виджеты Calltouch
Увеличьте конверсию сайта на 30%
Подробнее

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сквозная аналитика
Оценивайте эффективность всех рекламных кампаний в одном окне от клика до ROI
Вкладывайте в ту рекламу, которая приводит клиентов
Подробнее

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

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

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

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

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

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

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

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

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

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

Заключение

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

Вопросы и ответы

Почему Яндекс Карта не отображается на сайте?

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

Можно ли указать на карте несколько адресов?

Да. В разделе «Метки» выберите указатель и разместите его над всеми нужными вам локациями. Добавьте описание.

Редактор блога Calltouch
Нет времени читать?
Оцените
Поделитесь с друзьями
Лучшие маркетинговые практики — каждый месяц в дайджесте Calltouch
Подписывайтесь сейчас и получите 13 чек-листов маркетолога
Нажимая на кнопку "Подписаться", вы даёте своё согласие на обработку персональных данных и получение рекламной информации о продуктах, услугах посредством звонков и рассылок по предоставленным каналам связи.
У вас интересный материал?
Опубликуйте статью в нашем блоге
Опубликовать статью
Хотите получить актуальную подборку кейсов?
Прямо сейчас бесплатно отправим подборку обучающих кейсов с прибылью от 14 730 до 536 900р.
[contact-form-7 404 "Not Found"]
У нас тут cookies…
На сайте используются файлы cookies. Продолжая использование сайта, вы соглашаетесь с этим. Подробности об обработке ваших данных — в политике использования файлов cookie.
Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить