Как сделать шорткод яндекс карты
Обновлено: 05.07.2024
Совмещаем базовые функции Яндекс.Карт и Google MyMaps и получаем готовую зону для логистики, аналитики и размещения в приложении.
Расскажу и покажу на своем личном опыте методом проб и ошибок, как быстро и качественно создавать карты для компании, связанной с сервисом доставки на примере доставки еды. Более того, здесь Вы найдете способы применения карт для аналитики. В конце Вас ждёт подарок.
Рынок фудтеха сильно развился за 2020 год в связи с пандемией ковид-19. Лагерь разделился на тех, кто улучшил показатели и тех, кому пришлось закрыть свои кафе/рестораны.
В марте во время локдауна фудтеху потребовалось показать скорость, которую он не показывал никогда — речь идет не сколько о скорости доставки и оказании услуг, а о быстром реагировании и перестраивании бизнес-процессов. Одним из них оказалось изменение зоны доставки сети ресторанов, в которой я работал последние 2 года.
В интернете есть много статей на тему того как и где нарисовать зону доставки, но нет подробных инструкций на следующие темы:
- как быстро менять зоны доставок со множеством элементов
- как соединить несколько карт
- как можно использовать карту в мобильном приложении и на сайте
- как проводить анализ по различным показателям
Обо всем по порядку.
У нас есть 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 только 1 формат для экспорта это KMZ/KML, нам нужна возможность разных форматов, поэтому переносим карту в Яндекс.Карты:
Обязательно ставим галочку на выделенной строке, иначе файл выгрузится в формате KMZ, который Яндекс.Карты не поддерживают. Далее загружаем файл в Яндекс.Карты и получаем результат.
Обратите внимание, поменялись цвета меток, не критично, но если вы захотите задать каждой метке определенной точки свой цвет, то делать это лучше всего после объединения двух зон.
Зоны готовы, но что с ними теперь делать?
Во-первых: вы знаете, куда теперь могут доставлять ваши рестораны. Вашим курьерам и операторам, кассирам, менеджерам, которые принимают и обрабатывают заказ теперь есть на что ориентироваться.
Во-вторых: Можно передать карту веб-мастеру и он поместит карту на сайт, либо выгрузив файл в формате GeoJSON, можно передать его разработчикам мобильного приложения и они загрузят полигоны, чтобы приложение могло считывать попадает ли адрес гостя в зону доставки или нет, и если попадает, то с какими условиями для заказа.
В-третьих: спустя N-ое время можно проводить аналитику.
Сейчас на рынке много агрегаторов, у каждого из них свои условия, но если у вас есть доставка своими силами, а не силами агрегатора, то рано или поздно вас попросят предоставить зону доставки. DeliveryClub, Chibbis, Okolo и им подобным будет достаточно формата KML или GeoJSON, но к сожалению, в Яндекс.Еде зону придется рисовать вручную внутри интерфейса.
Для некоторых будет сюрпризом, но в DeliveryClub вы можете сами определить зону доставки своими курьерами. При запуске доставки своими силами менеджеры агрегатора задают вопрос: выстроить зону по умолчанию или есть готовая? Если вы не знали этого или если вам не задавали такой вопрос, то обязательно загружайте свою зону, так как у вас будет большое преимущество и по времени и по условиям в сравнении с конкурентами, а также вы сможете анализировать заказы по своей зоне.
Для чего нужна аналитика и что можно проанализировать?
Доставке еды необходимо понимать — где и больше и чаще всего заказывают гости, в какие зоны нужно сделать упор, а про какие можно забыть. Можно сделать и более детальную аналитику по оборачиваемости, возврату гостей и прочим желаемым параметрам, но речь идет о базе: о кучности заказов.
Перед началом аналитики нужна таблица Excel в подобном формате:
Такие данные можно получить из вашей CRM-системы или из агрегатора, в моем случае это выгрузка заказов из DeliveryClub, я оставил только нужные мне столбцы.
Есть два способа аналитики.
1. Вручную проставить адреса гостей, чтобы понять кучность заказов.
В конструкторе Яндекс.Карт просто вбиваете в зону адрес доставки и ставите метку. Это очень легкий способ, благодаря нему можно увидеть адреса доставок поверх зоны, но это может занять много времени.
Нам откроется отдельное окно с интерфейсом 3d-карт.
Внутри файла Excel таблицу, где будет только Адрес гостя в формате: Город, улица, дом.
Выделяем весь столбец и нажимаем на стрелочку у кнопки 3d-maps и выбираем "Добавить выбранные данные в 3d-maps.
После снова открывается окно с картой в 3D maps, подсвечивается окно Расположение.
В Excele должны появиться синие точки адресов, приближаем
Отлично, нам видно расположение адресов на которые осуществлялись заказы, но нам нужно лучше понимать ситуацию. Меняем визуализацию на тепловую карту.
Сине-зеленая точка это наименьшее количество заказов по определенному адресу.
Зеленая точка среднее количество заказов.
Точка с красно-желтой подсветкой самое наибольшее количество заказов.
Можно сравнить тепловую карту с зоной доставки и понять, где заказывают чаще, где не заказывают вообще. Исходя из такой базовой аналитики можно сделать разные выводы о том, почему в определенной зоне заказывают меньше, причин может быть много: слабый локальный маркетинг, дорогая стоимость доставки или минимальная сумма, долгое время доставки и так далее. Только путем экспериментов можно понять причину проседания отдельно взятых зон. Проводите акции, меняйте параметры для рекламы, меняйте условия доставки, меняйте зоны и после этого сделаете для себя определенные выводы.
Спасибо, что дочитали до конца! Надеюсь мой материал поможет начинающим и действующим специалистам, владельцам, сотрудникам доставок еды. В качестве подарка хочу поделиться картами, которых мне не хватало в одно время и они очень помогли мне для аналитики. Карта станций метро (их протяженность) и районов Москвы, которые я отрисовал сам. К сожалению, возможно, она актуальна только для тех, кто работает с Москвой, но может послужить примером и для других городов.
Здесь у нас конструктор карты Яндекса. Поработаем с конструктором:
- находим нужную локацию на карте,
- добавляем заголовок,
- также можно поменять цвет точки,
- и добавить маршрут с помощью инструментов конструктора.
Вставим яндекс карту на сайт
В моем случае получился следующий код карты:
Открываем редактор страницы, в режиме редактирования исходного кода (есть ли такой, зависит от конкретной CMS).
Вставляем код в нужном месте, сохраняем.
Если карта не подходит по ширине или высоте, можно отредактировать и задать свои размеры в полученном коде карты: width=600 — это ширина, а height=450 — высота.
Настройки
Простой шорткод для вставки карт Google Maps на страницы и в посты блога. Имеет один обязательный и три необязательных параметра, позволяющих рационально расположить карту на странице.
Если ваш блог посвящен путешествиям, или туристическому бизнесу, или просто вы хотите показать места, где побывали, то наверняка для демонстрации точного местоположения используете онлайновые картографические сервисы. Одним из самых популярных является Google Maps. Этот сервис для вставки своих карт предлагает использовать ссылки или объекты, внедряемые через iframe. Но дело в том, что в зависимости от роли пользователя, у него может не получиться вставить iframe — редактор его вырежет. Чтобы этого не происходило, можно сделать так, что iframe будет вставляться не при сохранении поста, а при выводе страницы в браузере — с помощью шорткода.
Давайте создадим простейший шорткод для вставки карт Google Maps на страницы блога и в посты. Для этого вставим следующий код в файл functions.php используемой вами темы:
В файл style.css используемой вами темы вставим:
Мы создали шорткод [codei_php]gmap[_php]. Он имеет один обязательный параметр src — ссылку на карту.
В шорткоде есть еще три параметра, которые использовать не обязательно. Они созданы для того, чтобы задать карте расположение в тексте, а так же ширину и высоту — width, height, style. Если эти параметры не вставлять в шорткод, то будут использоваться значения по умолчанию:
- width — ширина карты в px. По умолчанию равна 960px.
- height — высота карты в px. По умолчанию равна 540px.
- style — параметр, определяющий положение на странице. Может иметь значение normal, left и right. Если выбрать normal, то карта будет располагаться отдельной строкой. Если использовать left или right, то карта будет расположена слева и справа, текст страницы будет ее обтекать.
Пример использования шорткода с параметрами:
Манипулируя параметрами шорткода, можно добиться наиболее удобного расположения карты на странице.
В этой теме мы будем рады ответить на вопросы, связанные с работой сервиса.
Пожалуйста, обозначьте на картах Дома: СПб, ул. Заречная, д.37 и д.35. Дома заселяются, а такси и любая доставка нас не находят.
Добрый день,
Как я могу передать право редактирования созданной мною карты другому пользователю?
Спасибо!
Подскажите пожалуйста, как сделать на Яндекс картах так, чтобы у меня группа объектов загружалась? Весь интернет обрыл в поисках нормально информации, так ничего не нашел. Заранее благодарен!
Станислав, Здравствуйте, поясните, пожалуйста, Ваш вопрос. Какого рода объекты Вы хотите загружать, это создание карты для сайта или печати?
API Яндекс.Карт, для сайта. Задача - отобразить группу обьектов на сайте по конкретной категории, пытался делать по инструкции - не получилось, примера не могу найти в интернете..
хотелось бы вывести на сайте.
как мне это реализовать проще. если вводить по новой в конструкторе сложно и долго.
можент импорт есть какой нибудь
Здравствуйте, к сожалению, проще не получится. Ваш маршрут отмечен с помощью линейки, её состояние нельзя запомнить и отобразить на сайте в виджете Конструктора.
Обратите внимание, что использование линейки в качестве разметки маршрута на сайте - не лучшая идея, так как Ваши пользователи смогут случайно его "сломать" подвинув точку или выключив линейку.
Читайте также: