Онлайн-карты

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

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

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

Как добавить карту на сайт

Онлайн-карты Как добавить карту на сайт
Язык:Русский
Формат:
Обновлено:2017-04-01
Автор:





Как добавить карту на сайт

Если Вы хотите добавить на свой сайт карту Гугла или Яндекса с собственными метками, то мы расскажем Вам как это сделать.

Думаю, буду прав, если скажу, что развитие современных веб-технологий во многом обязано распространению мобильных платформ (в первую очередь Android и iOS). Начиная с глобального, например, тотального перехода большинства веб-ресурсов на адаптивную вёрстку, и кончая мелочами, вроде кликабельных номеров телефона, которые можно набрать в одно касание.

Но даже мелочи играют, порой, весьма большое значение. Возьмём ситуацию. Есть, к примеру, два сайта, которые предлагают купить что-нибудь недорого. Реальные представительства обеих сайтов находятся в одном и том же городе (скажем, в Москве). Адреса представительств указаны и там, и там. Но на первом сайте адрес просто написан где-нибудь в подвале, а на втором наглядно оформлен в виде карты, по которой пользователь может нажать и сразу же получить координаты... Вопрос знатокам: "Где продажи будут выше"? :)

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

Способы вставки карт

Технически вставка карты на сайт сводится к добавлению на страницу фрейма, который отображает нужный фрагмент местности напрямую с картографического сервиса (обычно Google или Яндекс). То есть, мы просто делаем своеобразную "дырку" в веб-странице с подложкой под неё карты (кстати, аналогично вставляется видео с YouTube, например).

Гораздо запутаннее выглядит ситуация с добавлением собственных меток. Так, например, ранее Google позволял делать метки в виде красных маячков и снабжать их описанием прямо на основном сервисе. Затем такая возможность реализовалась при помощи JavaScript API. Но с прошлого года API стал платным и единственным официальным способом добавить карту Гугла со своими пометками на сайт стал сервис "Мои карты".

Мои карты Гугл

Яндекс же в этом плане изначально куда более удобен. Он предоставляет не только полноценный API, но и готовый веб-интерфейс ("Конструктор карт") для визуальной работы с ним без знания JavaScript (фактически аналог "Моих карт")!

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

Кроме, собственно, Гугла и Яндекса существует ещё ряд сервисов, которые позволяют наносить свои метки на карты. О них мы тоже расскажем, но менее подробно. А сейчас сосредоточимся на том, что нам позволяют делать основные гиганты картографии.


Свои метки на картах Гугла

Как я уже говорил, Google закрыл почти все возможности пользователям для редактирования собственных карт. Если Вы, например, откроете обычные карты и попробуете в меню поделиться (Меню – "Ссылка/код") определёнными координатами, то максимум, что Вы получите – ссылку или карту, отцентрованную по нужной точке без каких-либо маркеров и пояснений...

Стандартная карта Гугла без меток

Для получения координат навигатором, кстати, такая карта подходит, однако, обычный человек вряд ли поймёт, куда ему идти, поскольку нужное место визуально никак не отмечено. Чтобы делать хорошие информативные метки на картах Гугла Вам нужно иметь аккаунт Google и использовать их официальный сервис "Мои карты".

Этот сервис позволяет пользователю совершать следующие действия:

  • добавлять метки с описаниями и фотографиями;
  • прокладывать маршруты с возможностью измерения расстояния между его пунктами;
  • рисовать произвольные линии с возможностью замера расстояния и площади образованных ими замкнутых фигур.

Начало работы с сервисом Мои карты

На стартовой странице сервиса находится список созданных Вами ранее карт (может быть пустым) и кнопка "Создать новую карту". С неё и начнём работу. После нажатия перед Вами откроется привычная гуглокарта с немного непривычными органами управления. Рассмотрим их внимательно:

Инструменты сервиса Мои карты

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

Стоит также обратить внимание на небольшую кнопку "Базовая карта" на боковой панели. с её помощью Вы можете изменить стиль самой карты (я, например, предпочитаю стиль "Спутник").

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

Новая метка на Моих картах

После сохранения введённых первичных данных Ваша метка будет добавлена на текущий активный слой и у Вас появится несколько новых возможностей для её настройки. Во-первых, на боковой панели над самой меткой будет раздел "Индивидуальный стиль". Нажав по нему, Вы сможете выбрать подпись, которая будет отображаться около маркера. В качестве подписи может выступать название метки или её сокращённое до одной строчки описание.

Настройка метки на Моих картах

Во-вторых, новые инструменты появятся и во всплывающем окошке над добавленным маркером. Кроме правки описания, Вы можете изменить внешний вид самого маркера, выбрав одну из стандартных иконок или даже, загрузив любое своё фото (кнопка "Ещё" – "Пользовательский значок"). Также при помощи специальной кнопки свои фотографии Вы можете загрузить и для показа в панели описания. Ну и напоследок, имеется возможность проложить маршрут между добавленной Вами точкой и другим пунктом назначения при помощи предпоследней кнопки. В итоге можно получить нечто подобное:

Карта с метками и маршрутом на Моих картах

Когда всё настроено, остаётся только встроить готовую карту на сайт. Для этого нужно сделать две вещи. Первым делом зададим масштаб отображения. Для этого отрегулируем карту до нужного размера, вызовем её меню (три точки справа от названия) и нажмём кнопку "Задать область просмотра по умолчанию". Теперь осталось получить код для встраивания карты на сайт. Жмём на боковой панели кнопку "Поделиться", задаём название карты и разрешаем её просмотр всем пользователям. После этого снова возвращаемся в меню карты, жмём кнопку "Добавить на сайт", копируем полученный код и вставляем его на свой сайт:

Настройка метки на Моих картах

Хотелось бы немного остановиться на вопросе оптимизации полученного кода:

<iframe src="https://www.google.com/maps/d/embed?mid=1b77KtUJockbLhfoC6bj5KXf2upE" width="640" height="480"></iframe>

Дело в том, что по умолчанию вставляемый Вами фрейм с картой имеет чётко заданные размеры. Сегодня же актуально делать везде, где можно, адаптивную вёрстку, которая автоматически подстраивается под размере экрана. По стандартам HTML для фрейма нельзя указывать ширину и высоту в процентах, поэтому в коде эти параметры лучше убрать вовсе, заменив каким-либо CSS-классом, а размеры задать уже через CSS или встроенные стили:

Вариант 1. С классом (более правильно)

HTML:

<iframe src="https://www.google.com/maps/d/embed?mid=1b77KtUJockbLhfoC6bj5KXf2upE" class="google-map"></iframe>

CSS:

.google-map {width:100%; height:480px;}

Вариант 2. Встроенные стили

<iframe src="https://www.google.com/maps/d/embed?mid=1b77KtUJockbLhfoC6bj5KXf2upE" style=".google-map {width:100%; height:480px;}"></iframe>

Вот так можно получить красивую функциональную и валидно вставленную адаптивную карту Гугла на сайт:

Свои метки на картах Яндекса

У Яндекса, как уже говорилось выше, изначально возможностей для редактирования карт было больше. Во-первых, до сих пор существует и развивается сервис "Народная Карта", где каждый может делать собственные пометки на общей карте. Во-вторых, имеется полноценный API на JavaScript, который позволяет веб-мастерам максимально настроить внешний вид карты и меток на ней. А в-третьих, для тех, кто не знаком с JavaScript, есть визуальный сервис "Конструктор Карт", который реализует большинство возможностей API! Его и рассмотрим:

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

Как и в "Моих картах" интерфейс здесь разделён на боковую панель, на которой отображается список добавленных Вами меток и настройки карты, а также функциональные клавиши в верхней части, при помощи которых можно добавлять на карту свои метки. Возможностей здесь, правда, поменьше. Мы можем добавлять лишь стандартные маркеры (причём, если в виде иконок, то только без подписей), рисовать линии (аналог прокладки маршрута) и многоугольники. Единственным новшеством, которого не было у Гугла, является возможность отображать пробки на дорогах. Но это актуально лишь для крупных городов.

Алгоритм действий здесь тот же, что и в "Моих картах". Находим нужный нам участок карты, активируем инструмент "Метки" и добавляем кликом маркер в нужном месте. В появившемся всплывающем окошке можно задать цвет маркера, его тип ("запятая" или "точка"), а также немного приукрасить при помощи добавления текста или нестандартной иконки (но в этом случае текста подписи не будет видно). Кроме подписи, которая будет видна справа от метки, можно добавить и краткое описание, которое будет выводиться по нажатию на маркер.

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

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

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

В принципе, на этом всё. Чтобы получить код карты с Вашими метками нажмём на кнопку "Сохранить и продолжить" (боковая панель внизу) и в открывшемся окошке отрегулируем размеры видимой части карты. Для адаптивности рекомендую активировать опцию "Растянуть по ширине", после чего достаточно будет нажать кнопку "Получить код карты":

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

В отличие от Гугла, Яндекс отдаёт карту не в виде фрейма, а в виде скрипта, который аналогично вставляется в нужное место на странице Вашего сайта. Если Вы разбираетесь в JavaScript, то, немного переписав скрипт, можете значительно улучшить внешний вид карты, заменив значки меток и добавив картинки к описанию (инструкция здесь или здесь). Но, в принципе, и без этого смотрится всё довольно прилично:

Другие онлайн-карты

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

OpenStreetMap (OSM)

Карты OpenStreetMap больше походят на планы местности. Здесь нет детальной отрисовки ландшафта и домов, но, тем не менее, это единственные онлайн-карты, которые полностью создаются реальными людьми и которые можно править собственноручно. За счёт активности пользователей карты OSM в некоторых местах планеты отображают даже более точную информацию, чем гуглокарты (правда, это далеко не везде)!

Что касается возможностей, то здесь нам доступны установки меток с описаниями и рисование маршрутов. Причём, если у Вас есть GPS-трекер, то данные о маршруте можно экспортировать на карту прямо с него. Есть у карт OpenStreetMap и расширенный режим правки. В этом режиме в качестве основы отображаются карты Bing и Вы можете делать на них любые пометки, рисовать линии и фигуры, аналогично "Моим картам" Гугла. Все сохранённые правки попадут на общую карту, поэтому будьте внимательны при внесении любых изменений, чтобы не вводить в заблуждение других пользователей заведомо неверной информацией!

Код карты OSM

ScribbleMaps

Если Вы не боитесь англоязычного интерфейса и хотите получить карту с метками в стиле ранних карт Гугла (со всплывающими по клику окошками с описанием, картинками и даже видео), то Вам может понравиться сервис ScribbleMaps:

Карты ScribbleMaps

Данный сервис позволяет в качестве подложки использовать карты большинства популярных ресурсов (в том числе Гугла и OSM), а уже поверх них устанавливать многочисленные метки, фигуры, маршруты и даже просто изображения или текстовые надписи. Словом, если Вам потребуется нанести на карту максимально много собственной информации, то карты ScribbleMaps должны Вам в этом помочь.

Следует, правда, отметить, что есть у данного сервиса и ряд негативных аспектов. Часть функционала доступна лишь на платной основе для так называемых VIP-пользователей. Но, в принципе, для вставки меток и картинок не нужно быть никаким "випом". И даже более того – создать карту и получить код для её вставки на сайт можно даже без регистрации! Вот такая вот противоречивость :)

AniMaps

Если Вы вдруг захотите показать своим посетителям не просто место на карте, а наглядно продемонстрировать путь к нему, то в этом Вам может помочь сервис AniMaps:

Карты AniMaps

AniMaps позволяет добавить на стандартную карту Гугла маршрут и по его ходу отображать определённые изображения или текстовые пояснения. Скорость перемещения по заданному маршруту Вы задаёте самостоятельно при помощи полозка времени над картой. Итогом Вашей работы будет автоматическая презентация маршрута с "остановками" в отмеченных Вами местах.

Создавать маршруты можно и без регистрации, но получить код для вставки на сайт могут только зарегистрированные пользователи.

Выводы

Вставка карты на сайт не составит особого труда, если заранее знать все нужные сервисы для этого. При этом необязательно быть программистом или вообще каким-либо IT-специалистом – всё делается в визуальном режиме! На выходе Вы всегда получите готовый код, который можно просто вставить в текст на странице Вашего сайта без установки каких-либо специализированных плагинов.

Владея же хотя бы базовыми познаниями в сфере веб-технологий, Вы сможете немного улучшить код полученной карты, сделав её адаптивной (как в случае с Гуглом) или добавив дополнительные элементы (как в Яндексе). Воспользовавшись же средствами многочисленных иностранных сервисов онлайн-картографии, Вы сможете удивить своих пользователей даже анимацией на картах! А ведь чем интереснее Ваше предложение, тем больше клиентов оно привлечёт ;)

P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.







Полезный совет:


Система проверки ошибок от Mistakes.ru