Конструктор карт яндекс в приложении

Обновлено: 07.05.2024

Совмещаем базовые функции Яндекс.Карт и Google MyMaps и получаем готовую зону для логистики, аналитики и размещения в приложении.

Расскажу и покажу на своем личном опыте методом проб и ошибок, как быстро и качественно создавать карты для компании, связанной с сервисом доставки на примере доставки еды. Более того, здесь Вы найдете способы применения карт для аналитики. В конце Вас ждёт подарок.

Рынок фудтеха сильно развился за 2020 год в связи с пандемией ковид-19. Лагерь разделился на тех, кто улучшил показатели и тех, кому пришлось закрыть свои кафе/рестораны.

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

В интернете есть много статей на тему того как и где нарисовать зону доставки, но нет подробных инструкций на следующие темы:

как быстро менять зоны доставок со множеством элементов
как соединить несколько карт
как можно использовать карту в мобильном приложении и на сайте
как проводить анализ по различным показателям

Обо всем по порядку.

У нас есть 2 ресторана/кафе/дарк-китчена, нам необходимо выстроить зоны доставок для них. Зоны нужны для понимания: куда мы будем возить еду, сколько человек у нас заказывает в определенной зоне, для передачи зон агрегатору, для загрузки в мобильное приложение/на сайт.

Для работы в конструкторе Яндекс.Карт достаточно залогиниться через любой удобный способ. Открывается следующее окно:

Нажимаем «Создать карту» и в наших руках инструмент для отрисовки зон доставки. Далее подробно о каждой кнопке.

1. Метки. С помощью меток можно обозначить определенные точки, в нашем случае это будет 2 ресторана. (Адреса выбраны случайно). Нажимаем на кнопку «Метки» и просто тыкаем по нужному дому, либо, вбиваем в поиске адрес заведения и метка проставится сама. В подписи к метке не забываем дать название точке.

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

3. Многоугольники — самый основной инструмент, при помощи него и выстраиваются наши зоны доставок. Его разберем после описания всех других кнопок.

4. Пробки. Можно просмотреть пробки в реальном времени, чтобы понимать, где в будущем курьеры могут задерживаться на заказах. Однако, в реальном времени смотреть бесполезно, нужно выстраивать прогноз на самые пиковые дни, обычно это пятница с 17-18 часов.

5. Слои. Выбор показа карты — в виде схемы, со спутника или гибрида. Нам необходимо в виде схемы, т.к. меньше нагружает браузер и быстрее прогружает улицы и здания при перемещении и масштабировании.

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

7. Даем название и описание нашей карте. В название для чего эта карта, адрес ресторана, возможно, условия доставки. В описание можно продублировать информацию, но расписав подробнее. По завершению отрисовку станет понятнее.

8. Импорт. Можно загрузить готовую карту в одном из предложенных форматов: XLSX, CSV, KML, GPX или GeoJSON. В дальнейшем нам нужны будут в основном KML и GeoJSON. Но так как мы строим карту с нуля, то импорт нам пока неактуален.

3. Вернемся к многоугольникам. Перед началом отрисовки мы должны понять — под какие условия будем выстраивать зону: время доставки, сумма заказа, стоимость доставки, какие у нас курьеры — пешие, на велосипедах, на общественном транспорте или автомобилях. Отмечу, что логичнее всего выстраивать зоны в формате ABC. Где А самая ближайшая зона с самой низкой минимальной суммой заказа, самым быстрым временем доставки и самой дешевой или вовсе бесплатной стоимостью доставки.

В нашем образце будут следующие зоны:

А — мин. сумма заказа 500 рублей. Время доставки 30 минут. Доставка бесплатная. Курьеры на велосипедах.

B — мин. сумма заказа 800 рублей. Время доставки 60 минут. Доставка 150 рублей. Курьеры на автомобилях.

C — мин. сумма заказа 1000 рублей. Время доставки до 90 минут. Доставка 250 рублей. Курьеры на автомобилях.

Чтобы нам было удобно выстраивать зоны доставки и считать примерно время маршрута, то делим 2 вкладки на весь экран. В одном из окон мы будет считать время маршрута, во втором рисовать зону.

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

Нажимаем на «Сохранить и продолжить»:

Далее копируем ссылку, чтобы открыть в новом окне, либо нажимаем на иконку Яндекс.карт и карта сама откроется в новой вкладке. Нам необходимо перепроверить крайние точки на максимальное время 15 минут.

Перепроверил выстроенную зону и обнаружил границу, где время превышает 15 минут. Сократил эту часть. Двойным нажатием на белый кружок, обведенный выше, отрезок зоны удаляется.

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

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

Отрисовать зоны второй точки в этой же карте? Как быть с границами, с пересечениями?

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

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

Создаем новую карту.

Нажимаем на Импорт и открывается следующее окно:

Предварительно экспортируем уже готовую карту из Яндекс.карт:

Загружаем файл в конструктор Google:

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

В Google нажимаем «Добавить слой»

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

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

При перетягивании круглых точек, точка одной зоны «липнет» к точке другой зоны. Исправили:

О корректировке подробнее. В Яндекс.Картах чтобы не допустить пересечения границ, нужно кропотливо в очень приближенном масштабе менять зоны, чтобы не допустить накладывания зон друг на друга. Во-первых это занимает много времени, во-вторых есть вероятность, что пересечение или зазор останутся.

По итогу получаем две идеальные зоны, которые не имеют пересечений или зазоров у своих границ:

Выгружаем карты из Google Карт и переносим обратно в Яндекс.Карты. Почему? В отличии от Яндекс.Карт у Google только 1 формат для экспорта это KMZ/KML, нам нужна возможность разных форматов, поэтому переносим карту в Яндекс.Карты:

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

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

Зоны готовы, но что с ними теперь делать?

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

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

В-третьих: спустя N-ое время можно проводить аналитику.

Сейчас на рынке много агрегаторов, у каждого из них свои условия, но если у вас есть доставка своими силами, а не силами агрегатора, то рано или поздно вас попросят предоставить зону доставки. DeliveryClub, Chibbis, Okolo и им подобным будет достаточно формата KML или GeoJSON, но к сожалению, в Яндекс.Еде зону придется рисовать вручную внутри интерфейса.

Для некоторых будет сюрпризом, но в DeliveryClub вы можете сами определить зону доставки своими курьерами. При запуске доставки своими силами менеджеры агрегатора задают вопрос: выстроить зону по умолчанию или есть готовая? Если вы не знали этого или если вам не задавали такой вопрос, то обязательно загружайте свою зону, так как у вас будет большое преимущество и по времени и по условиям в сравнении с конкурентами, а также вы сможете анализировать заказы по своей зоне.

Для чего нужна аналитика и что можно проанализировать?

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

Перед началом аналитики нужна таблица Excel в подобном формате:

Такие данные можно получить из вашей CRM-системы или из агрегатора, в моем случае это выгрузка заказов из DeliveryClub, я оставил только нужные мне столбцы.

Есть два способа аналитики.

1. Вручную проставить адреса гостей, чтобы понять кучность заказов.

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

2. Создать тепловую карту через Excel PowerMap. И путем сравнения «на глаз» понимать где границы вашей зоны и где гости заказывают чаще. Создаем новый пустой файл Excel. Во вкладке "Вставка" есть кнопка 3D-карта (если нет, поищите в поисковиках ответ на этот вопрос, что сделать чтобы появилась).

Нам откроется отдельное окно с интерфейсом 3d-карт.

Внутри файла Excel таблицу, где будет только Адрес гостя в формате: Город, улица, дом.

Выделяем весь столбец и нажимаем на стрелочку у кнопки 3d-maps и выбираем "Добавить выбранные данные в 3d-maps.

После снова открывается окно с картой в 3D maps, подсвечивается окно Расположение.

Нажимаем «Добавить поле» и выбираем на выпавший диапазон:

После Выбираем формат «Полный адрес»

В Excele должны появиться синие точки адресов, приближаем

Отлично, нам видно расположение адресов на которые осуществлялись заказы, но нам нужно лучше понимать ситуацию. Меняем визуализацию на тепловую карту.

Сине-зеленая точка это наименьшее количество заказов по определенному адресу.

Зеленая точка среднее количество заказов.

Точка с красно-желтой подсветкой самое наибольшее количество заказов.

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

Спасибо, что дочитали до конца! Надеюсь мой материал поможет начинающим и действующим специалистам, владельцам, сотрудникам доставок еды. В качестве подарка хочу поделиться картами, которых мне не хватало в одно время и они очень помогли мне для аналитики. Карта станций метро (их протяженность) и районов Москвы, которые я отрисовал сам. К сожалению, возможно, она актуальна только для тех, кто работает с Москвой, но может послужить примером и для других городов.

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

Чтобы создать или отредактировать свою карту:

Нажмите на изображение профиля. Если вы не авторизованы, нажмите кнопку и авторизуйтесь.

Чтобы открыть Конструктор карт, в боковом меню выберите Мои карты .

На карте вы сможете нарисовать:

Метки — подъезды, пункты встречи и т. д.

Линии — улицы, маршруты, границы и т. д.

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

Созданную вами карту вы можете:

Также вы можете сохранить объекты вашей карты в виде файла, который можно использовать, чтобы:

импортировать нужные точки в программы-навигаторы;

использовать совместно с API Яндекс Карт;

просматривать и сохранять данные в других программах (например, в Google Earth).

Подробнее об этом инструменте см. в справке Конструктора карт.

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

Чтобы создать или отредактировать свою карту:

Нажмите на изображение профиля. Если вы не авторизованы, нажмите кнопку и авторизуйтесь.

Чтобы открыть Конструктор карт, в боковом меню выберите Мои карты .

На карте вы сможете нарисовать:

Метки — подъезды, пункты встречи и т. д.

Линии — улицы, маршруты, границы и т. д.

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

Созданную вами карту вы можете:

Также вы можете сохранить объекты вашей карты в виде файла, который можно использовать, чтобы:

импортировать нужные точки в программы-навигаторы;

использовать совместно с API Яндекс Карт;

просматривать и сохранять данные в других программах (например, в Google Earth).

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

Чтобы создать или отредактировать свою карту:

Нажмите на изображение профиля. Если вы не авторизованы, нажмите кнопку и авторизуйтесь.

Чтобы открыть Конструктор карт, в боковом меню выберите Мои карты .

На карте вы сможете нарисовать:

Метки — подъезды, пункты встречи и т. д.

Линии — улицы, маршруты, границы и т. д.

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

Созданную вами карту вы можете:

Также вы можете сохранить объекты вашей карты в виде файла, который можно использовать, чтобы:

импортировать нужные точки в программы-навигаторы;

использовать совместно с API Яндекс Карт;

просматривать и сохранять данные в других программах (например, в Google Earth).

Подробнее об этом инструменте см. в справке Конструктора карт.

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

Чтобы создать или отредактировать свою карту:

Нажмите на изображение профиля. Если вы не авторизованы, нажмите кнопку и авторизуйтесь.

Чтобы открыть Конструктор карт, в боковом меню выберите Мои карты .

На карте вы сможете нарисовать:

Метки — подъезды, пункты встречи и т. д.

Линии — улицы, маршруты, границы и т. д.

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

Созданную вами карту вы можете:

Также вы можете сохранить объекты вашей карты в виде файла, который можно использовать, чтобы:

импортировать нужные точки в программы-навигаторы;

использовать совместно с API Яндекс Карт;

просматривать и сохранять данные в других программах (например, в Google Earth).

8 лет работаю удалённо и создаю различные источники дохода. Строю бизнес в интернете и активно инвестирую.

В этой статье я расскажу о том, как сделать карту в конструкторе Яндекса и разместить ее на своем сайте. Статья будет полезна преимущественно для владельцев коммерческих сайтов, ведь именно там нужна карта с указанием адреса.

Зачем это нужно

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

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

У этого есть и другое значение – если пользователь видит, что у вашей компании есть свой офис, куда можно приехать (еще лучше, если он обозначен в Яндекс и Гугл Мапс), уровень доверия к вам значительно повышается. Ваш бизнес уже не воспринимается как что-то непонятное и сомнительное.

Карта интерактивная. Это значит, что ваши клиенты смогут сориентироваться, посмотреть схему проезда, наличие условных знаков, названия улиц.

Поэтому давайте перейдем к инструкции размещения карты на сайт.

Создание карты

Для этого мы будем пользоваться специальным конструктором карт Яндекса. Его могут использовать все, но придется пройти регистрацию и завести себе аккаунт Яндекса.

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

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

Все созданные вами объекты будут доступны в “Списке объектов”. Их при желании можно удалить или отредактировать.

Метки

Метками можно обозначить ближайшие станции метро или автобусные остановки. Еще меткой можно обозначить вход в здание (если оно большое) или другие офисы, если они есть.

Чтобы создать метку выберите ее в панели управления сверху и кликните по любому месту на карте. После этого выскочит окно, в котором вы сможете ввести подпись метки и краткое описание – оно будет выводиться при клике. Также вы можете выбрать цвет и тип метки. Рядом доступны и другие параметры кастомизации, например иконки или произвольное число.

Как только редактирование будет завершено, кликните на кнопку “Готово”. Можно создать сколько угодно меток. Но если их будет слишком много, пользователи могут запутаться.

Линии

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

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

Линия создается по точкам, как только вы кликните на определенного место, нужно переместить курсор по направлению линии и кликнуть еще раз. Как только формирование линии будет закончено, нажмите на клавишу “Esc”. После этого всплывет окно с опциями.

Вы можете выбрать цвет, процент прозрачности и толщину линии. Также можно ввести описание, которое будет доступно при клике по объекту. Кликаем на “Готово”, как только редактирование будет закончено.

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

С помощью многоугольников вы также можете рисовать произвольные отметки на карте. Обычно этот инструмент используют для обрисовки контура здания. Им же можно обозначить какую-то территорию или любую другую местность.

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

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

После того, как фигура сформирована, нажимаем на клавишу “Esc”. Выскочит окно с параметрами.

Можно задать цвет контура и заливки, выбрать толщину. Обратите внимание на два поля “Прозрачность”, которые расположены параллельно контуру и заливке. Здесь вы можете задать процент прозрачности.

Если выставить 100, то нужный элемент просто исчезнет. Например, вы хотите, чтобы был только контур – вводите значение 100 в поле напротив заливки и она исчезает. То же сработает и с самим контуром. Очень удобно.

Можно закрывать редактор с помощью кнопки “Готово”. Но не спешите, есть еще кое-что, о чем надо сказать.

Пробки и слои

Эти два инструмента также могут помочь при создании карты. С помощью кнопки “Пробки” вы можете включить отображение дорог, где есть пробки. Для больших городов это очень важный пункт.

Слои же отвечают за тип карты. Например, на моих скриншотах стоит стандартный рисованный вариант. Если он вам не нравится, то вы можете выбрать спутник (думаю, не надо объяснять, что это вид со спутника) и гибрид. Последний представляет собой смесь рисованного варианта и спутника (грубо говоря: спутник с отметками).

Сохранение и получение кода

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

Но это еще не все. После этого конструктор предложит нам выбрать размер карты и ее тип. Есть интерактивный, когда пользователь может менять масштаб или прокручивать карту при помощи мыши, или статичный, когда он видит простую картинку в формате PNG.

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

Нажимаем “Получить код карты”, после чего нам предлагается выбрать вариант кода: JavaScript или iframe.

Код на JavaScript имеет больше возможностей. Пользователи смогут менять масштаб, вид (слои), отмечать пробки и т. д. Если же вы выберете iframe, то функционал будет урезан, посетители смогут посмотреть пробки и больше ничего.

Размещение кода на сайте

Вне зависимости от выбранного варианта вам придется размещать код на сайте. Я не буду подробно рассказывать о том, как это сделать – все индивидуально и зависит от вашей платформы.

Принцип везде один – вам необходимо просто вставить код в нужном месте страницы вашего проекта. В том же WordPress это можно сделать при помощи встроенного редактора. В других CMS этот процесс тоже мало чем отличается.

В любой момент вы можете зайти в раздел “Мои карты” и изменить какие-то параметры, добавить новые метки или линии, получить другой тип кода.

Также вы можете импортировать готовую карту из форматов XLSX, CSV, KML, GPX или GeoJSON.

Заключение

Надеюсь, теперь вы понимаете, как создать свою вариацию карты и установить ее на сайт. Тут нет ничего сложного, нужно просто следовать инструкции и читать то, что написано в официальной документации. Последнее актуально в тех случаях, когда нужно изменить размеры или вставить ее в определенный контейнер. В общем-то, не сложнее, чем сделать карту в конструкторе Google Maps – все примерно так же.

Если вы хотите лучше разбираться в сайтах, а если быть точнее – в информационных проектах, то я рекомендую вам обратить внимание на курс Василия Блинова “Как создать сайт”. В нем автор рассматривает информационные сайты как способ стабильного пассивного дохода, учит правильно создавать и продвигать ресурсы в поисковых системах. Есть уроки по монетизации и написанию контента. Обязательно заглядывайте.

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

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

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

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

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

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

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

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

Повысьте конверсию сайта на 30%
Оптимизируйте работу колл-центра
Увеличьте лояльность клиентов
Подробная статистика по всем обращениям с привязкой к источнику

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отображение

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

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

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

Сохранение

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

Маркетинг

Говорит и показывает Calltouch: конференции и форумы апреля

Публикация

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

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

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

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

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

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

Автоматически соберет данные с рекламных площадок, сервисов и CRM в 1 окне
Бесплатные интеграции c CRM и другими сервисами: более 50 готовых решений
Анализируйте воронку продаж от показов до кассы
Оптимизируйте свой маркетинг с помощью подробных отчетов: дашборды, графики, диаграммы
Кастомизируйте таблицы, добавляйте свои метрики. Стройте отчеты моментально за любые периоды

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

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

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

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

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

Заключение

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

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