Подборки

6 сервисов, где можно сделать интерактивную карту

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

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

Рассказываем, для чего нужны интерактивные карты в маркетинге и в каких сервисах их можно делать.

Как использовать интерактивные карты

В маркетинге интерактивные карты обычно нужны в двух случаях.

1. Чтобы показать пользователю местонахождение офисов компании, покрытие доставки, адрес мероприятия или еще какую-то важную локацию.

Интерактивная карта Инвитро

Показывает адреса медицинских центров на сайте «Инвитро»

2. Чтобы продемонстрировать результаты исследования или достижения компании — допустим, показать сколько новых торговых точек открылось.

Интерактивная карта плотности населения

Показывает плотность населения в городах мира на сайте The Pudding

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

Функционал онлайн-редакторов карт для поиска адреса и для создания инфографики различается. В первом случае важна высокая степень детализации карты и обновление данных в режиме реального времени. Во втором случае точность отображения дворов и переулков не требуется, зато нужны опции добавления диаграмм, текстов, схем. Выбирайте сервис в зависимости от своих задач.

Ниже расскажу, как создать интерактивную карты для поиска адреса или маршрута и какие сервисы и программы в этом помогут.

Конструктор карт Яндекса

Как работает. Вы работаете в обычной карте Яндекса: выбираете фрагмент, ставите там нужные метки, прокладываете маршруты, указываете названия ваших объектов и их адреса. После редактирования сможете предварительно просмотреть получившийся фрагмент карты и при необходимости внести изменения.

Можно сохранить ссылку на карту и, например, рассылать ее клиентам. А можно скопировать код в JavaScript или inframe — так получившийся фрагмент карты можно вставить в приложение или на сайт. Пользователь сможет масштабировать карту, осуществлять поиск, выбирать нужные точки.

Конструктор интерактивных карт Яндекса
Интерфейс конструктора Яндекса

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

Условия. Цена на использование интерактивной карты зависит от размера вашей аудитории и необходимых функций. Если карта размещена в открытом доступе (без регистрации), вы согласны на отображение данных с логотипом Яндекса, а пользователей будет немного, карты можно использовать бесплатно. В иных случаях придётся заплатить, и чем больше у вас пользователей, тем выше стоимость. Подробнее про стоимость каждой функции в зависимости от размера аудитории можно почитать на сайте.

Попробовать по ссылке

Конструктор 2ГИС

Как работает. В редакторе 2ГИС есть много настроек внешнего вида карты: можно, например, выбирать цвет линий, загружать собственные шрифты, добавлять иконки. Все эти настройки можно сохранять в «Стили» и работать с ними, когда нужно. Начинать работу удобно с готовых шаблонов, которые сразу предоставляет 2ГИС. Как и в картах Яндекса, здесь можно отмечать локации и маршруты.

Конструктор интерактивных карт 2ГИС
Интерфейс редактора 2ГИС

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

Условия. Масштабируемой картой без дополнительных функций можно пользоваться бесплатно по ссылке. Если же вы хотите интегрировать карту в интерфейс, нужно покупать платную подписку. Исключение делают только для некоммерческих образовательных и исследовательских проектов. Стоимости использования карт нет в открытом доступе, 2ГИС высылает её по запросу. Оставить заявку можно на сайте.

Попробовать по ссылке

ZeeMaps

Как работает. Сервис позволяет добавлять локации и их описания, строить маршруты, а также выделять нужные области на карте. Можно получить доступ к карте по ссылке или HTML-код для публикации на сайте. В разделе формирования кода можно задать ещё несколько дополнительных настроек — например, поменять цвет меток или добавить поисковую строку.

Конструктор интерактивных карт ZeeMaps
Интерфейс редактора ZeeMaps

Для каких задач подходит. Поможет показать пользователям локации и маршруты на карте.

Условия. Есть бесплатный тариф, который позволяет публиковать карту в вашем сервисе с неограниченным числом точек на ней и неограниченным количеством уникальных посетителей. Всего можно сделать 5 таких карт. Есть лимит на количество используемых цветов, выделенных регионов и маршрутов. А ещё в бесплатной версии пользователи карты будут видеть рекламу. Есть и другие тарифные планы: частично ограничения снимаются за $19,95 в месяц, убрать рекламу удастся за $34,95 в месяц.

Попробовать по ссылке

Visme

Как работает. На сайте есть разные шаблоны, на основе которых можно работать над картой. Изначально сервис показывает карту мира, можно растянуть её, чтобы показать отдельную страну. В настройках можно задать степень детализации и границы, но очень детальной карта всё равно не будет — здесь нет информации о населённых пунктах, улицах и домах. Зато удобно менять цвета регионов, добавлять метки с текстовой или числовой информацией. А если данных много, можно загрузить Excel-таблицу и импортировать цифры автоматически.

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

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

Условия. Просмотр карты по ссылке доступен бесплатно, но с ним ваша карта будет доступна любому пользователю. Эмбед (встраивание HTML-кода на сайт) можно сделать также на бесплатном тарифе, он будет с брендингом Visme. Тариф Pro с возможностью убрать брендинг при эмбеде и создавать приватные ссылки стоит 1166 рублей в месяц.

Попробовать по ссылке

Datawrapper

Как работает. Есть три вида карт: 

  • карты с низкой детализацией, как в Visme;
  • карты с высокой детализацией для ориентации на местности, как в Яндексе и 2ГИС — чуть менее точные и не обновляются регулярно, но вручную отметить улицу и дом нетрудно;
  • карты с символами — цвет и размер символов может визуализировать какие-то данные. 

В редакторе можно выбирать цветовую гамму, форму символов, выравнивание текста. Числовые данные можно вводить вручную или импортировать из таблиц Excel. 

Интерактивная карта в Datawrapper
Пример символьной карты в Datawrapper

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

Условия. Получить ссылку на карту, а также код для эмбеда в JavaScript или inframe можно бесплатно. Один нюанс — карта будет с брендингом Datawrapper. На платных тарифах можно убрать логотип сервиса, а также получить более широкие возможности для дизайна — команда Datawrapper сделает кастомизированный шаблон по вашему брендбуку. Стоимость такой подписки внушительная — $599. Вероятно, это опция для крупных компаний, которые плотно работают с инфографикой.

Попробовать по ссылке

PowerPoint

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

Также на слайд можно загрузить любую карту эмбедом — через опцию Insert Web Page. Так можно, например, вставить интерактивную карту Яндекса или Datawrapper, которая будет работать при подключении к интернету.

Интерактивная карта в PowerPoint
Редактирование интерактивной карты в PowerPoint

Для каких задач подходит. Поскольку в PowerPoint можно добавлять любые карты, этот редактор подходит и для визуализации данных, и для указания объектов и маршрутов на местности. Но всё это работает в рамках презентации — её можно показывать на мероприятии или рассылать пользователям.

Условия. Программой можно пользоваться бесплатно в браузерной версии. Десктопное приложение стоит $69,99 в год.

Попробовать по ссылке

 

У каждого конструктора есть свои преимущества и ограничения — выбирайте тот, который подходит под ваши задачи:

Показать маршрут или объект на сайте Яндекс Карты, 2ГИС, ZeeMaps, Datawrapper
Показать маршрут или объект в презентации Яндекс Карты, 2ГИС, ZeeMaps, Datawrapper с эмбедом в PowerPoint
Сделать инфографику для эмбеда на сайт Visme, Datawrapper
Сделать инфографику для презентации Visme, PowerPoint