Calltouch Лидс
Звоните, отправляйте SMS, показывайте рекламу посетителям сайта, даже если у вас нет их контактов
Нет времени читать?
Отправить статью на почту

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

23 декабря 2022
11 мин на чтение
12177
author__photo

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

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

Зачем вам Яндекс.Карта

Помимо подробной масштабируемой карты со схемами населённых пунктов и инфраструктуры сервис включает в себя дополнительные функции:

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

Один из наиболее популярных способов использования Яндекс.Карт — в маркетинговых целях.

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

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

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

caltouch-platform
Виджеты Calltouch
  • Увеличьте конверсию сайта на 30%
  • Обратный звонок, промо-лендинги, формы захвата, мультикнопка, автопрозвон форм
Узнать подробнее
platform

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

Основное назначение карт — размещение их на различных ресурсах. Фрагмент местности, содержащий необходимые объекты, отображается прямо на странице сайта или мобильного приложения. Существует несколько форматов карт, доступных при создании:

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

 

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

 

Наиболее привычное и понятное расположение карты — это раздел Контакты

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

Как создать карту Яндекс для сайта

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

 

Как создать карту Яндекс для сайта

Создание объектов

В интерфейсе предлагается создание нескольких видов объектов на карте:

  • Метки

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

Для меток может быть задана особая иконка, цвет и название.

  • Линии

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

 

С помощью линий легко строить маршруты

  • Многоугольники

Этим способом обозначаются здания или территории. Если офис расположен в промзоне из множества строений, среди которых легко запутаться, вы можете отметить своё здание многоугольником. К нему также может быть добавлена подсказка по клику.

Помните: на карте может содержаться не более 10 000 объектов, включая вышеперечисленные. Также если обстоятельства вынуждают вас отметить на карте невероятно сложный объект, постарайтесь уместить количество вершин в 1 000, так как больше сервис поставить не позволит.

Для автоматизации процесса при клике левой кнопкой на любую вершину многоугольника выберите пункт Упростить контур. То же действие применимо и к линиям.

 

Многоугольниками обозначаются здания или территории

Отображение

Пользователь может выбрать и отображение карты:

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

Если вашим гостям важна обстановка на дорогах, то на карте включается отображение пробок.

Сохранение

По завершении создания карты дайте ей название и сохраните. Система предложит три варианта формата карты — интерактивная, статическая и печатная. Именно здесь можно экспортировать карту в файл (KML, CSV, GPX или GeoJSON). Получите код карты для её размещения на своём ресурсе и добавьте его в исходный код сайта.

Публикация

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

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

Как вставить карту на сайт на WordPress

Определите, на какой странице сайта хотите разместить карту. Чаще размещают на странице «Контакты». Чтобы вставить карту на сайт на WordPress:

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

 

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

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

caltouch-platform
Сквозная аналитика Calltouch
  • Анализируйте воронку продаж от показов до денег в кассе
  • Автоматический сбор данных, удобные отчеты и бесплатные интеграции
Узнать подробнее
platform

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

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

Плагины Яндекс.Карт

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

 

C помощью плагина Oi Yandex.Maps для WordPress можно добавлять карту на сайт с любым числом меток на каждой. Интерфейс плагина интуитивно понятный и удобный. После установки и активации плагина введите нужный адрес или координаты — плагин сгенерирует шорткод карты, и вставьте его на сайт.

Заключение

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

 

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