Добавление карты Yandex с маршрутом на свой сайт

Добрый вечер, друзья!

Волею судеб я занимаюсь техническим сопровождением конференции «Маркетинг без пыли«. Это и обработка видео, и, собственно, наполнение сайта. Одной из особенностей данной конференции является ее совершенно нестандартное место проведения — в летний сезон это обычно парк, зимой же — либо уютное кафе, либо библиотека. Организаторы, подчеркивая свое отличие от банальных маркетинговых конференций с досками и занудными речами даже подчеркнули свое отличие самим названием конференции — БЕЗ ПЫЛИ. А это значит, что: никакого официоза, никаких особых требований к внешним регалиям (ты можешь быть младшим сотрудником маркетингового отдела, и иметь интересный практический опыт, а можешь быть и звездой с погонами — главное, твой практический опыт и твое желание им поделиться).

Так вот, вернемся к главному. Место проведения. В связи с тем, что место проведения все время разное (кажется, я повторяюсь), в разделе, где указывается адрес места встречи нужно не только указать адрес, но и отрисовать схему прохода/проезда. Конечно, никто не мешает заскринить кусок карты, в Photoshop нарисовать схему прохода и вставить картинку в сайт. Но… как-то это … скучно, грустно и вообще не круто. Если согласны и дочитали до этого места — читаем дальше 😉

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

Кстати, поисковый запрос в данном случае звучит как-то так:

Вставка Яндекс-карты на сайт

🙂 Порадовали роботов, двигаемся дальше. Нам понадобится:
1. Открыть Конструктор Карт — для этого просто кликните по ЭТОЙ ссылке, которая откроется в новой вкладке. Выглядит все это дело приблизительно так:
Яндекс-конструктор

2. Кликаем по пункту «Создать новую карту».

3. Наблюдаем вот такую картинку:
Яндекс-новая-карта
Слева вы можете указать название пункта на карте, а так же описать его. В строке поиска, ожидаемо, вы можете ввести адрес или название нужного объекта, после чего найти его на карте. Попробуем проложить маршрут по городу Черновцы — от ратуши, по улице Кобылянской, в ресторан «Панська Гуральня» (просто там вкусное пиво, а на улице так жарко 🙂 ). Вводим название искомой улицы в строке поиска:
Ольги Кобылянской карта

Яндекс очень шустро отображает искомую улицу. Остается только поставить метку возле нужного пункта: ресторан. Кликаем по скрину ниже — откроется подсказка в нормальном виде 😉

яндекс карта добавление метки

4. Кликаем на кнопку «Готово», создав тем самым конечную точку на карте (никто не мешает обозначить несколько точек — ваша карта, вы и решайте)

5. Осталось добавить маршрут. Для этого находим начальную точку на карте. В нашем случае — это ратуша (горсовет). После того, как вы нашли нужную вам точку на карте, не забудьте добавить к ней метку (смотрим пункт 3). В итоге получается нечто вроде такого:

черновцы ратуша

Дело за малым: выбрать кнопочку «Линии» на карте и отрисовать весь необходимый маршрут:

Яндекс карта создание маршрута

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

6. Отрисовали маршрут? Кликаем на желтую кнопку в левом нижнем углу: «Сохранить и продолжить». Нам открывается вот такая картина:

яндекс карта код

Как видно — у вас есть возможность выбора типа карты: интерактивная, спутниковая и печатная, указать ее размер (а можно кликнуть по полю «Растянуть по ширине» и получить карту заданной высоты и шириной в 100%), и, наконец, получить код карты, который вы и будете интегрировать в свой сайт. Для этого нужно лишь нажать на желтую кнопочку «Получить код карты». После нажимания нам открывается окно следующего вида:

яндекс карта код на сайт

7. Сохраняем полученный код, и вставляем в свой сайт, получая вот такую удобную штуку:

Кстати, на видео ниже — урок: как вставить Яндекс-карту со схемой проезда на свой сайт. Смотрим!

Спасибо за внимание! Как всегда — в случае возникновения вопросов не стесняйтесь задавать их на почту: oleksiy@lavrynenko.com

Support the Blog!

Running a blog takes a lot of effort, time, and passion. Your donations help improve the content, inspire new ideas, and keep the project going.
If you’ve enjoyed the blog’s materials, any support would mean the world to me. Thank you for being here! ❤️

PayPal Logo Donate via PayPal

Revolut Logo Donate via Revolut