Как бесплатно сделать интерактивную карту: сервис Interacty

Как бесплатно сделать интерактивную карту: сервис Interacty

технология

Как бесплатно сделать интерактивную карту: сервис Interacty
Рассказываем, как с помощью бесплатного редактора расставить точки на интерактивной карте (или любой картинке), подписать все объекты и встроить ее к себе на сайт.

Разумеется, если вам нужно указать маршрут или отметить ваш магазин на карте, то лучше использовать Google Maps и Яндекс Карты. Но что делать, если вам нужна нестандартная карта?

Карта расположения залов в музее / карта боевых действий для новостного портала / карта коттеджного поселка / карта народных гуляний / карта Средиземья, наконец?

Пример интерактивной карты на «Медузе»

Для этого есть бесплатный и очень простой в использовании инструмент — встраиваемые статьи Interacty Instant Pages. Это формат, который позволяет добавлять на сайт различные виды контента: текст, картинки, флип-карты, интерактивные карты, фото до и после, тесты, слайдшоу и многое другое. Но вернемся к картам.

Создаем собственную карту

Откройте галерею шаблонов онлайн-сервиса Interacty. Нас интересует раздел «Встраиваемые статьи» (Instant Pages).

Раздел «Встраиваемые статьи» в галерее шаблонов

Выберите шаблон «Interactive map — Museums of Europe» и нажмите «Использовать шаблон».

Если вы не зарегистрированы, то сервис предложит создать аккаунт (это бесплатно и займет меньше минуты). Если у вас уже есть аккаунт, то вы сразу же попадете в редактор Interacty.

Шаблон, открытый в редакторе

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

Пройдитесь по меткам на карте, чтобы настроить подписи и загрузить картинки, где нужно.

Посмотреть, что у вас получилось можно в табе «Предпросмотр». Осталось только встроить на сайт. Нажмите «Опубликовать» и скопируйте строчку полученного кода на ваш сайт — готово!

Проект также будет доступен по прямой ссылке. Готовый проект можно покликать по ссылке. А вот что увидит пользователь при клике, например, на метку «Берлин».

Инструкция актуальна на декабрь 2020 года.

Над материалом работал
Олег Лукинов

Иллюстрации:
скриншоты сервиса Interacty

Знаете похожие технологии? Расскажите о своем опыте, нам интересно!

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: