Онлайн конструктор Яндекс Карт: создаем схему проезда на сайт

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

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

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

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

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

После чего вы увидите основной интерфейс, с помощью которого и будете ее создавать. Слева необходимо ввести название вашей карты, например, «Схема проезда к моему магазину». Оно будет служить идентификатором для вас, так как карт можно создать огромное количество. Чуть ниже можно задать краткое описание, чтобы различать карты в случае, если их будет много. Название и описание будете видеть только вы.

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

Метки

С помощью поиска по адресу или в ручном режиме, двигая карту и увеличивая масштаб, находим адрес. Допустим, наша компания находится по адресу «Азовская улица 24к2». Для этого нажимаем на кнопку «Метки» в инструментах и устанавливаем метку на карте. Тут можно выбрать цвет метки, тип, номер или иконку.

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

Уменьшим чуть масштаб и добавим по аналогии еще меток. Метро и пару ориентиров – «Универсам 24» и «Спортплощадку», чтобы человеку было легче искать компанию. Сделаем метки круглыми, также с иконками, цветами отличными от основной точки. Добавим короткие описания.

Линии

Далее укажем маршрут от метро. Для этого понадобится инструмент «Линии». При прокладке линий нам доступен цвет, прозрачность и толщина этих линий. А также уже встречающееся в метках описание. В нем можно указать свой комментарий или указать номера автобусов, на которых можно добраться. Я указал время ходьбы от метро.

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

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

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

Тут доступны для редактирования: цвет контура и его толщина, цвет заливки, прозрачность в процентах и описание. Для наглядности я еще добавлю метку сверху, со знаком «P», которая будет обозначать парковку и уже к ней сделаю описание.

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

Сделаем это вторым примером. Я разбил Москву на три зоны – «МКАД», «ТТК» и «Садовое кольцо». В описании указал стоимость равную 390, 290 и 190 рублей. Подобную карту обычно размещают в разделе «Доставка». Клиент, кликнув по определенной зоне, сможет увидеть стоимость доставки для того или иного района города. Это очень наглядно и не нужно много текста писать, где заканчивается одна зона и начинается другая.

Пробки и слои

В конструкторе имеется возможность задать какой слой карты показывать – «Схема», «Спутник», или «Гибрид», обычно используется классическая «Схема». По желанию укажите отображать ли пробки на карте. Слои и пробки, клиент сам сможет поменять на интерактивной карте. Поэтому тут вы указываете в каком состоянии будет карта «по умолчанию».

Получение кода и размещение на сайте

Остается только нажать «Сохранить карту и получить ссылку», слева от карты, и конструктор предложит в каком виде ее нужно сохранить – «Интерактивная карта» и «Статическая карта». Также карту можно распечатать. Далее попросит задать размер в пикселях по ширине и высоте. Есть возможность указать 100% ширину, чтобы карта растягивалась автоматически, в зависимости от размера окна браузера.

Выбираем интерактивную карту, после выбора параметров, и нажимаем на кнопку «Получить код карты». Конструктор предлагает код для вставки на сайт. Либо в формате javascript-кода, либо в виде вставки через iframe. Если в вашей CMS-системе есть возможность вставки произвольного html, то лучше выбрать javascript.

«Статическая карта» понадобится, если мы захотим вставить карту в виде картинки на сайт. Эта картинка будет меняться автоматически без правок на сайте. Если на свою карту вы будете добавлять новые метки или линии, то они появятся и на статической карте. Правда метки не будут иметь подсказок и иконок, а будут выводится в стандартном виде.

Если выберем «Распечатать», то конструктор предложит сохранить картинку в высоком разрешении, в формате PNG или JPG. После чего, изображение можно сохранить на компьютер или на яндекс диск. И уже оттуда распечатать на принтере. Можно это же изображение вставить на сайт, если вдруг статическая и интерактивная карты не подходят по каким-то причинам.

В итоге получаем такие вот варианты. Привожу ниже коды примеров, и то, как они выглядит на сайте.

Интерактивная карта схемы проезда

Код схемы проезда

<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A78d1735799af7e9d3daba3b2508fd9c53094d60f7849f3b9729757b9775b7e94&amp;width=100%25&amp;height=600&amp;lang=ru_RU&amp;scroll=false"></script>

Интерактивная карта зон доставки

Код зон доставки

<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3AWhKRaMEskSxSVnxZ44WxG0NbP6ChZLpe&amp;width=100%25&amp;height=600&amp;lang=ru_RU&amp;scroll=false"></script>

Можете менять масштаб, двигать карту, кликать на линию или метку. Вам будут показываться подсказки, которые добавлены в поля «описание». Единственное, я заменил в коде переменную «scroll» со значения «true», на «false». Это не даст пользователю скролить карту колесиком мышки. Бывает полезно, когда карта растягивается на всю ширину где-нибудь на лендинге.

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