Интерактивные карты и схемы стали очень удобным инструментом навигации и поиска нужных мест на местности и информации об объектах. Выполняются они на HTML5, просматриваются на всех устройствах и адаптированы под различные размеры экранов.
Для размещения карты на странице сайта должны быть заранее определены размеры блока (они соответствуют размерам рекламного места на площадке). Для корректного отображения горизонтальной карты блок должен быть горизонтальной ориентации и, соответственно, для вертикальной блок также должен быть вертикальным. И таким образом выделенное на странице рекламное место будет использовано оптимально.
Ниже представлены несколько примеров таких карт.
Пример №1. Простейшая карта России с представителями в некоторых городах. При нажатии на кнопку показывается информация и контакты представителя, которые можно копировать. Карта версталась очень давно, поэтому в ней применено мало дополнительных функций. Карта с фиксированными размерами, поэтому под гаджеты с узкими экранами не адаптирована и просматривается полностью на мобилках при её прокрутке пальцем.
Пример №2. Адаптивный план микрорайона в котором находится салон красоты. Показана схема прохода к нему.
Пример №3. Эскиз интерактивной мультимедийной карты. При щелчке по контурам Красноярского края и Якутии визуально изменяется цвет в контуре. Но фактически накладывается новая картинка, в которой можно разместить любую информацию в виде текста, изображний, подключить аудио и видео с ютуба. В этом примере только 4 интерактивных блока. Блоки не полностью между собой синхронизированы, поэтому при открытии некоторых элементов другие не закрываются. Можно ещё добавить дополнительные крестики и назначить им действие по закрытию нужных слоёв. Но это просто эскиз показывающий функциональность скриптов, над доработкой которого можно ещё поработать.
Пример №4. Схема проезда к месту сбора туристов.
Пример №5. Пример простого интерактивного мультимедийного приложения, презентации. После прочтения подсказок на кружках нажимайте на них и сможете ознакомиться с активными действиями и анимацией. Нажмите на иконку мобильника и перейдёте на другую страницу.
Пример №6 откроется по ссылке в новой вкладке. Это не совсем карта, а больше похоже на презентацию для страниц по теме "Золотое кольцо России". Представлен только макет с двумя городами. Полная версия доступна при заказе. Подобное можно сделать по любой другой тематике. Посмотреть презентацию >>>
Пример №7 откроется по ссылке в новой вкладке. Здесь представлена презентация "Сенсорные корзины для малышей" в HTML5 без анимации, но с активными кнопками. При нажатии на каждую происходит открытие другого изображения. Подобное можно сделать для любой тематики с любым количеством страниц. Также можно сделать всё с анимацией и с интерактивными объектами, такими как местоположение, контакты, ссылки. Здесь презентация свёрстана без адаптивности по вертикали, хотя это можно сделать. Ну и в таком виде она на мобильных устройствах просматривается нормально. Посмотреть презентацию >>>
Пример №8 откроется по ссылке в новой вкладке. Здесь представлена презентация торговой марки "Realgreen" в HTML5 без анимации и без интерактивных контактов. Это можно сделать в рабочей версии. Также можно сделать всё с анимацией и с интерактивными объектами, такими как местоположение, контакты, ссылки. Здесь презентация свёрстана без адаптивности по вертикали, чтобы можно было её увеличивать. Посмотреть презентацию >>>
Пример №9 откроется в новой вкладке. Это карта России, с нанесённой на неё ссылкой для примера только на один регион. При нажатии на значёк гео появляется вкладка, которая может быть любой конфигурации и размера. И в ней размещается нужная информация с интерактивными контактами. Она может быть свёрстана и адаптивной. Посмотреть карту >>>
Обращайтесь, задавайте вопросы. Не пожалеете. Отвечу всем. Работаю в рабочее время без выходных и праздников.
С уважением, Валерий. Моя страница профиля в Кворке: https://kwork.ru/user/ovalery.
Может это также будет Вам интересно:
Адаптивные баннеры. Примеры HTML5-баннеров.
Слайдеры для сайта, для визиток и для баннеров.