Конструктор карт Яндекс – узнайте, как разместить карту проезда на своем сайте

Конструктор Яндекс карт – это веб-сервис, с помощью которого можно создавать персонализированные карты проезда и отдельных объектов.

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

Содержание:

Фактически, это одна из функций API из картографического сервиса от Яндекс и предназначен он больше для обычных пользователей.

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

Рассмотрим, как создать собственный маршрут и разместить его на сайте.

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

Почему следует выбрать конструктор от Yandex?

Как известно, карты Яндекса намного лучше адаптированы для стран СНГ, чем аналоги от Google или HereMaps.

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

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

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

Преимущества конструктора Яндекс:

  • Актуальная информация для пользователя. Все маршруты создаются с учетом последних картографических изменений. С Yandex вы всегда будете в курсе новых построек, дорожных разветвлений, монументов, указателей и других объектов;
  • Удобно для владельцев компаний и сайтов. После импорта карты на сайт все обновления применяются автоматически. Таким образом, пользователи ресурса или клиенты всегда будут в курсе, как быстрее добраться до выбранного места;
  • Повышает рейтинг организации в интернете. Всегда сайты с проработанным дизайном и хорошим функционалом вызывают доверие у потенциальных клиентов. Согласно статистике, более высокий рейтинг набирают организации с полностью заполненной информацией о графике работы, номерах телефонов и со встроенными картами маршрутов.

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

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

к содержанию ↑

Типы карт

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

  • Статическая. Самый простой в создании вид карт. Итоговый результат – это картинка PNG. На статические маршруты можно добавить только ограниченное число предметов и объектов;
  • Печатная. Выполняется в форме картинки в высоком качестве. Её можно сохранить на свой ПК и отправить на печать;
  • Интерактивная. Такую карту можно изменять в режиме реального времени, а объекты на ней могут передвигаться и изменяться. Удобный вариант для тех, кто планирует создавать маршрут, которым будут пользоваться одновременно несколько людей. С его помощью можно делиться короткими сообщениями и предупреждениями. Также, интерактивные карты можно добавлять на другие сайты.

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

к содержанию ↑

Создание карты – инструкция

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

Затем перейдите по ссылке https://yandex.ua/map-constructor/ и ознакомьтесь с базовыми функциями сервиса. Нажмите «Продолжить»:

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

Яндекс выстраивает самые оптимальные и быстрые схемы проезда.

Если вы выбрали интерактивную карту, в процессе езды она подскажет водителю, где находятся важные дорожные знаки, ремонтные работы, пробки и другие объекты.

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

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

  • В главном окне сервиса нажмите на поле «Создать». Если ранее вы уже работали с конструктором, сервис предложит вам вернуться к редактированию проектов. Также, вы сможете их удалить или скопировать. Кнопка «К импорту» позволяет загрузить с компьютера или смартфона уже готовую карту, на которую нужно добавить новые объекты или внести правки;

  • В левой части сервиса введите название нового проекта и его описание;
  • Далее вы можете импортировать объекты на свою карту с памяти компьютера. Сайт поддерживает загрузку файлов в формате XLSX, CSV, KML, GPX или GeoJSON;
  • Если у вас нет объектов для импорта, разместить их на карте можно самостоятельно. Достаточно в правой части окна выбрать масштаб изображения и начать работу с конструктором. С помощью панели элементов вы можете добавить на карту метки, линии, многоугольники, места скопления машин или работать со слоями;
  • Чтобы быстро перейти в карте нужно местности, в текстовом поле поиска введите нужный адрес, название города или организации.

 Обратите внимание! На сайте есть несколько ограничений. Для одной карты может быть использовано не более 10 0000 объектов. Также, нельзя размещать интерактивные указатели в версии карт для печати или в статическом типе проекта. 

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

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

Добавление карты на сайт

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

Следуйте инструкции:

  • В окне сохранения выберите тип «Интерактивная»;
  • Затем на карте выделите область, которая является основной. Определение границ поможет получить более качественное и увеличенное превью карты на вашем сайте;

  • Далее задайте размер объекта. После выделения области на карте размер будет выставлен автоматически, а если вам нужна конкретная величина, вручную напечатайте ширину и высоту. Также, можно растянуть карту по ширине, что удобно для встраивания на лэндинги или одностраничные ресурсы;
  • Нажмите кнопку «Получить код»;

  • В правой части окна появится поле с кодом для встраивания. У вас есть возможность выбрать один из двух вариантов разметки – JavaScript или iframe, в зависимости от особенностей сайта. Скопируйте содержимое текстового окна;
  • Для добавления объекта на свой сайт достаточно добавить в код страницы скопированный элемент. Если карта не отображается, рекомендуем стереть кэш браузера.

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

 Обновленные теги языка разметки HTML не всегда адаптированы под iframe. Из-за этого у пользователей могут возникнуть проблемы с работой карты. 

В окне сохранения карты доступна прямая ссылка на результат работы.

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

Даже если человек не имеет аккаунта Яндекс, он все равно сможет увидеть персонализированную карту. Увеличить её и ознакомиться со всеми добавленными на неё объектами.

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

Тематические видеоролики:

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

2 комментария

сначала новые
по рейтингу сначала новые по хронологии
1

I’m excited to explore all the possibilities this service offers! Thanks for sharing this great resource! https://spacewaves.io

2

Can you be more specific about the content of your article? After reading it, I still have some doubts. Hope you can help me.

Geek-Nose