Как создать интерактивную карту для сайта и зачем она нужна

Всем привет! Поскольку мои последние посты были о картах для блогов, решил продолжить эту тему. До 2010 года, чтобы узнать, как создать интерактивную карту для сайта, необходимо было сесть за учебники по HTML, Java и открыть документацию по Flash. Как правило, карты все равно получались неуправляемыми, плохо загружались или не отображались вовсе, и приходилось пользоваться обычной в виде изображения.

Введение

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

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

Сервисы

Чтобы разобраться, как создать интерактивную карту для сайта, необязательно уметь самостоятельно писать код, преобразовывать данные и скрипты. Сервисы, о которых ниже пойдет речь, предоставляют вебмастеру готовый javascript-код, универсально подходящий к любой CMS. Чтобы установить интерактивную карту к себе на интернет-портал достаточно просто выучить сочетание клавиш Ctrl+C и Ctrl+V, не обращаясь к программисту.

1. Яндекс Карты – из всех известных сервисов предлагает самые гибкие инструменты, куда помимо геолокации, включается информация о пробках и народная карта;
2. Google Maps – прямой конкурент Яндекса. Карты от Google обладают схожим функционалом и возможностями, но более стандартизированы;
3. Geoserver – использует в основе Web Feature Server, но больше подходит для пользователей знающих принципы работы с серверами.

Подобные пакетные решения одинаково удобны и для пользователя, и для веб-мастера, в отличие от самописных на основе Flash и HTML-технологий. Начиная с 2013 года, 80% веб-студий, занимающихся созданием сайтов, используют Яндекс Карты, Google Maps и Geoserver в профессиональном сайтостроении. Такие карты бесплатны для использования, быстро редактируются и легко поддерживаются в актуальном состоянии. Следовательно, цена обслуживания и трудозатраты на них обходятся владельцу ресурса дешевле.

Создание интерактивной карты на примере Яндекс Карты

1. Откройте конструктор карт. В браузере развернется всплывающее окно с надписью: «Создайте собственную карту». Нажмите кнопку «Создать новую карту» или «Выбрать из списка»;
2. После этого интерфейс переведет на уровень параметров, где необходимо ввести название и описание карты. Когда поля будут заполнены, необходимо нажать «Сохранить и продолжить»;
3. В следующем окне для выбора параметров необходимо щелкнуть на иконке «Интерактивная», задать ширину и высоту слоя и нажать «Получить код карты»;
4. Полностью скопируйте код скрипта, вставьте в блок (например в виджет «текст») или на страницу и сохраните;
5. Если код не сработал, и карта не отображается, проверьте, все ли символы были верно скопированы из окна.

Готово! Инструкция, как создать интерактивную карту для сайта, выглядит длинной и сложной только на первый взгляд. В действительности создание слоя с геоданными и настройка необходимых параметров занимает не больше 1,5 минут. Предлагаю обсудить этот способ в комментариях.

Если статья Вам понравилась, поделитесь с друзьями!