Всем привет! Поскольку мои последние посты были о картах для блогов, решил продолжить эту тему. До 2010 года, чтобы узнать, как создать интерактивную карту для сайта, необходимо было сесть за учебники по HTML, Java и открыть документацию по Flash. Как правило, карты все равно получались неуправляемыми, плохо загружались или не отображались вовсе, и приходилось пользоваться обычной в виде изображения.
Important!
Содержание:
Введение
Сервисы
Создание интерактивной карты на примере Яндекс Карты
Введение
Сегодня интерактивная карта от обычной плоской в виде изображения отличается тем, что ее элементами можно управлять. Пользователь, находясь на странице, может свободно перемещаться по карте, находить объекты, схему проезда и просматривать информацию.
Notice
При необходимости элементы карты могут включать в себя помимо реальных физических объектов (дома, улицы, парки, дороги и т.д.) дополнительно текстовую информацию, видеозаписи и ссылки на другие сайты.
Основу интерактивной карты составляют оцифрованные гео-данные, находящиеся в базе сервиса в заданной системе координат. На лендингах и интернет-магазинах окно карты помогает указать место физического расположения офиса, магазина или сети торговых точек, что удобно для пользователя. По статистике замечено, что если интернет-магазин имеет место, куда клиент может приехать, позвонить или забрать оттуда товар самовывозом, то уровень доверия к ресурсу и фирме выше, что хорошо сказывается на продвижении бренда и продажах.
Сервисы
Чтобы разобраться, как создать интерактивную карту для сайта, необязательно уметь самостоятельно писать код, преобразовывать данные и скрипты. Сервисы, о которых ниже пойдет речь, предоставляют вебмастеру готовый javascript-код, универсально подходящий к любой CMS. Чтобы установить интерактивную карту к себе на интернет-портал достаточно просто выучить сочетание клавиш Ctrl+C и Ctrl+V, не обращаясь к программисту.
Яндекс Карты – из всех известных сервисов предлагает самые гибкие инструменты, куда помимо геолокации, включается информация о пробках и народная карта;
Google Maps – прямой конкурент Яндекса. Карты от Google обладают схожим функционалом и возможностями, но более стандартизированы;
Geoserver – использует в основе Web Feature Server, но больше подходит для пользователей знающих принципы работы с серверами.
Подобные пакетные решения одинаково удобны и для пользователя, и для веб-мастера, в отличие от самописных на основе Flash и HTML-технологий. Начиная с 2013 года, 80% веб-студий, занимающихся созданием сайтов, используют Яндекс Карты, Google Maps и Geoserver в профессиональном сайтостроении. Такие карты бесплатны для использования, быстро редактируются и легко поддерживаются в актуальном состоянии. Следовательно, цена обслуживания и трудозатраты на них обходятся владельцу ресурса дешевле.
Создание интерактивной карты на примере Яндекс Карты
Откройте конструктор карт. В браузере развернется всплывающее окно с надписью: «Создайте собственную карту». Нажмите кнопку «Создать новую карту» или «Выбрать из списка»;
После этого интерфейс переведет на уровень параметров, где необходимо ввести название и описание карты. Когда поля будут заполнены, необходимо нажать «Сохранить и продолжить»;
В следующем окне для выбора параметров необходимо щелкнуть на иконке «Интерактивная», задать ширину и высоту слоя и нажать «Получить код карты»;
Полностью скопируйте код скрипта, вставьте в блок (например в виджет «текст») или на страницу и сохраните;
Если код не сработал, и карта не отображается, проверьте, все ли символы были верно скопированы из окна.
Готово! Инструкция, как создать интерактивную карту для сайта, выглядит длинной и сложной только на первый взгляд. В действительности создание слоя с геоданными и настройка необходимых параметров занимает не больше 1,5 минут. Предлагаю обсудить этот способ в комментариях.
Если статья Вам понравилась, поделитесь с друзьями!
1 пинг
Как быстро создать чат для сайта | Секреты блогера
Апрель 25, 2017 в 12:16 (UTC 8) Ссылка на этот комментарий
[…] Также советую Вам почитать статью про создание интерактивной карты на […]