Главная | Блог | Темы | Маркетинг | Как создать и вставить карту Яндекс на сайтКак создать и вставить карту Яндекс на сайт 25 мая 2022 10 мин на чтение 22 708 Яндекс Яндекс Елизавета ТеряеваРедактор блога Calltouch Содержание Нет времени читать? Яндекс.Карты — сервис, который позволяет работать с интерактивными картами в браузере. Рассказываем, как внедрить его на свой сайт и использовать как эффективный инструмент маркетинга. Яндекс Карты — сервис, который позволяет работать с интерактивными картами в браузере. Он уточняет местоположение компании и помогает клиентам найти ее. Рассказываем, как вставить Яндекс Карту на сайт.Зачем вам интерактивная картаЯндекс Карты используют в маркетинговых целях. Организации отмечают на них филиалы, указывают контактные данные, время работы, получают отзывы. Так клиенты могут быстро найти подходящую точку продаж или заведение.У масштабируемой карты есть функции:поиск учреждений по адресам;обзор панорам;просмотр фотографий;проверка пробок;построение маршрутов;снимки со спутников;размещение на внешних ресурсах.Фрагмент местности со зданием вашей компании отображается прямо на странице сайта или мобильного приложения. Существует несколько форматов кар:Интерактивная. С ней можно взаимодействовать: перемещать, изменять масштаб.Статическая. Карта отображается на странице в виде скриншота.Печатная. Можно сохранить изображение в высоком разрешении для печати на носителе. Первыми двумя типами можно делиться с другими пользователями.Наиболее привычное и понятное расположение карты — это раздел «Контакты». Там пользователь ожидает увидеть адреса, телефоны и почту для связи. Компании указывают свое местоположение и в сервисе Яндекс Бизнес — он позволяет работать с картами и добавлять информацию об организации.Помимо карты, на сайт можно установить виджеты Calltouch. Обратный звонок, сбор заявок в нерабочее время и возможность связаться через удобные мессенджеры или соцсети увеличат конверсию и продажи. ВиджетыВиджеты CalltouchУвеличьте конверсию сайта на 30% Подробнее Инструкция по созданиюСделать Яндекс Карту и разместить ее на сайте можно как вручную, так и с помощью плагинов.Авторизуйтесь в Яндексе и перейдите в конструктор карт. Если у вас уже есть ранее созданные карты, вы увидите их список. В нем можно выбрать существующую — отредактировать, скопировать и поделиться — или создать новую. Также карты можно импортировать из файла.Создайте объекты. В интерфейсе есть несколько видов:Метки. Обозначают конкретные локации — пункт назначения или промежуточную точку на пути. Это может быть магазин, центральный офис, филиал, место для посадки в транспорт. Кликните на нужное здание, заполните название и описание локации. Задайте цвет, тип и иконку. Нажмите на кнопку «Готово», чтобы сохранить метку.Линии. Для построения маршрута нажмите на здание и проведите линию, например, до остановки. Если к вашему адресу есть несколько путей, обозначьте их линиями разных цветов и опционально добавьте описание к каждой.Многоугольники. Обозначают дома или территории. Если офис расположен в промзоне, в которой легко заблудиться, вы можете отметить свое здание многоугольником. Дважды кликните на пространство рядом и обведите территорию. Добавьте в открывшемся поле подсказку.Включите отображение пробок. Если вашим гостям важна обстановка на дорогах, активируйте опцию «Пробки» в верхней панели.Выберите тип карты. Они указаны в ниспадающем меню раздела «Слои». Варианты:Схема — нарисованный план местности с условными обозначениями.Спутник — карта-снимок из космоса.Гибрид — спутниковые снимки с надписями.Сохраните карту. Когда она будет готова, добавьте в поля слева название и описание. Нажмите на «Сохранить и продолжить» внизу страницы. Выберите формат — интерактивный, статический или печатный. Получите код, чтобы разместить на сайте. Маркетинг Читайте также: Сотрудничество с блогерами: от поиска до оценки рекламы Сотрудничество с блогерами: от поиска до оценки рекламы Опубликуйте карту. Передайте код программистам или расположите его в любой части сайта самостоятельно. Например, чтобы добавить карту под заголовком, вставьте ее после тега <h1>.В CMS используйте готовые плагины и модули — их полный список есть в информационной справке Яндекса. При подключении API загружайте карту через модули. Полная сборка API Яндекс Карт и необходимые инструменты для работы можно найти в package.full. Некоторые CMS и конструкторы сайтов имеют функцию вставки карты. Например, в Tilda это один из блоков в боковом меню.Чтобы вставить карту на сайт на WordPress:Зайдите в административную панель и выберите раздел «Страницы».Кликните на «Контакты», а затем — «Изменить».Поменяйте в редакторе режим «Визуально» на «Текст».В конструкторе Яндекс Карт для сайта скопируйте код iframe и вставьте его вниз страницы.Нажмите «Обновить».На лендингах карту размещают в подвале сайта. Для этого сгенерируйте в конструкторе HTML код карты и выполните аналогичные действия. Пройдите: «Внешний вид» → «Редактор» → «Подвал». Вставьте HTML код.Чтобы оценить эффективность рекламных каналов, подключите Сквозную аналитику Calltouch и не тратьте время на рутинные задачи. Вы узнаете, что приносит вам целевой трафик и доход. Сервис собирает все сведения с сайта, социальных сетей, CRM и экономит время сотрудников на составление отчетов. Сквозная аналитикаОценивайте эффективность всех рекламных кампаний в одном окне от клика до ROIВкладывайте в ту рекламу, которая приводит клиентов ПодробнееКарта с несколькими адресамиЕсли ваша компания работает по двум и более адресам, создайте карту для каждого. Выберите инструмент «Метки» и укажите название и описание первой локации. Вторую и последующие настройте аналогично. Измените цвет меток, чтобы различать их, и сделайте карту интерактивной — так пользователи смогут приблизить нужную точку и посмотреть маршрут.Готовую карту с несколькими адресами сохраните и вставьте на сайт.Настройка отложенной загрузкиКарты достаточно «тяжелые» — могут замедлять отображение страницы. Чтобы этого избежать, настройте отложенную загрузку (lazy load):по доскроллу — если карта размещена внизу страницы;по наведению курсора;по касанию на экране смартфона.Для этого в коде прописывают событие полной загрузки страницы — ‘DOMContentLoaded’. Затем — используют метод setTimeout и выставляют продолжительность задержки (в миллисекундах) до вызова карты. Получается строка:setTimeout(initYandexMap, Время задержки)После прописывают активности пользователя:document.addEventListener(‘scroll’, initYandexMapOnEvent);document.addEventListener(‘mousemove’, initYandexMapOnEvent);document.addEventListener(‘touchstart’, initYandexMapOnEvent) и загружают карту.ЗаключениеЯндекс Карта отображает адреса, метки и рассчитывает минимальный маршрут до офиса компании.Карту создают в конструкторе Яндекса и интегрируют на сайт с помощью сгенерированного при сохранении кода.Добавить Яндекс Карту на сайт можно как самостоятельно, так и через специальные плагиныВы можете создать интерактивную или статическую карту, настроить отображение локации в виде схемы или снимка со спутника.Карта может замедлять страницу. Настройте загрузку по доскроллу, тапу или наведению курсора. Вопросы и ответыПочему Яндекс Карта не отображается на сайте?Проблема может быть в скорости интернета или «тяжести» элементов ресурса. Проверьте производительность сайта и настройте отложенную загрузку карты. Если изменений нет, обратитесь в службу поддержки сервиса.Можно ли указать на карте несколько адресов?Да. В разделе «Метки» выберите указатель и разместите его над всеми нужными вам локациями. Добавьте описание. Елизавета ТеряеваРедактор блога Calltouch