Top.Mail.Ru

Как сделать интерактивную карту. Яндекс.Карты, 2ГИС, GoogleMaps

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

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

Конструктор карт 2ГИС

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

 

 

 

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

Конструктор карт Яндекса

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

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


Подробная инструкция

На нашем сайте подробнейшная и наглядная инструкция по работе с Яндекс.Картами. Искать здесь.


 

 

 

Картой можно поделиться через ссылку или код для сайта. При этом доступен статический и интерактивный вариант отображения. Также карту можно скачать в форматах PNG и JPG или экспортировать как KML, XLSX, GPX, GEO JSON, CSV. Готовые карты сохраняются в аккаунте Яндекса.

GoogleMaps

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

Стиль карты можно переключать: доступно 9 различных дизайнов. Метки и линии также настраиваются, можно менять их цвет и размер. У каждого слоя тоже есть настройки стиля, например, включение подписей или нумерация точек.

К каждой отметке можно добавить всплывающую подсказку (2 680 символов в названии и 5 360 в описании), а также загрузить пользовательское изображение или видео. Большое преимущество GoogleMaps — все ссылки в описании будут активными. Это позволяет собирать полноценные коллекции материалов.

 

 

 

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

Над материалом работали:
Сергей Пахоруков
Иллюстрации:
скриншоты с сайтов: Яндекс.Карты, 2ГИС, GoogleMaps
Инструкция актуальна:
на февраль 2024 года

Подводя итоги:

1
Соберите информацию
2
Отметьте точки на карте
3
Добавьте подробные описания к меткам