ВАРИАНТЫ ПРЕДОСТАВЛЕНИЯ КАРТОГРАФИЧЕСКИХ СЕРВИСОВ И ТЕХНОЛОГИЙ НА РАЗЛИЧНЫХ ИНТЕРНЕТ-РЕСУРСАХ

АННОТАЦИЯ

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

ABSTRACT

The goal is to consider ways of providing and integrating map services on various Internet resources, as well as their advantages and disadvantages. To determine the most optimal variant of the map service application on the Internet resource.

Ключевые слова: картографический сервис; Google Maps API; веб-сайт; карты; метки.

Keywords: cartographic service; Google Maps API; web-site; maps; marks.

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

– указание меток по адресам различных объектов инфраструктуры (офисы, гостиницы, кафе, рестораны и многое другое) для ориентирования потенциальных пользователей;

– для определения текущего местоположения различных движущихся объектов (автотранспорта, клиентов и др.);

– для построения маршрутов между различными точками на карте;

– для обозначения участков местности (полигонов) предназначенных для осуществления тех или иных видов деятельности (зоны отдыха, парки, заповедники).

Для реализации данных задач, в настоящее время наиболее часто используются Яндекс.Карты, Google карты и 2ГИС.

В качестве примера, в данной статье, более подробно рассматривается применение и интеграция Google карт на странице веб-сайта.

Работа с картами Google осуществляется через API, который представляет собой набор различных классов, функций, процедур для использования их извне.

Интегрировать карту с сайтом можно несколькими способами.

Первый и наиболее простой способ – это применение готового плагина, который встраивается в используемую CMS. СMS – это система управления контентом, облегчающая работу и не требующая внедрения в код страницы контент-редакторов или админов веб-сайта. Примерами таких плагинов являются WP Google Maps, Simple Google Maps Short Code, СP Google Maps. Среди значимых недостатков использования сторонних плагинов можно выделить следующее:

–  отсутствие «кроссплатформенности» (плагины разрабатываются под конкретные CMS);

– отсутствие бесплатной версии;

– ограниченность предоставляемым функционалом плагина.

Второй способ заключается во встраивании фрагмента карты. Реализация данного способа заключается в выполнении следующих этапов:

1. Перейти на Google карты.

2. В главном меню выбрать пункт «ссылка/код».

3. Во вкладке «встраивание карты» определить сектор участка карты и масштаб ее отображения.

4. Скопировать html код, представляющий собой фрейм с ссылкой и параметрами карты.

На рисунке 1 представлен html код встраиваемой карты. Ссылка, помещенная в тег «src» содержит после амперсанда определение границ отображаемого участка карты, атрибуты «width» и «height» позволяют менять размер окна карты на веб-странице.

Рисунок 1. Код встраиваемой карты

Главным недостатком такого способа является отсутствие полноценной работы с картой, то есть карты доступна только к просмотру и масштабированию, никаких других функций не предусмотрено. На рисунке 2 продемонстрировано отображение «встроенной карты» вторым способом.

Рисунок 2. Встроенная карта на странице (способ 2)

Третий способ встраивания карты состоит в инициализации карты на странице веб-сайта путем использования языка JavaScript.  В данном способе, для использования API-интерфейса необходимы аутентификация и авторизация с использованием протокола OAuth 2.0.

Создание карты Google с маркером на веб-странице осуществляется в 3 этапа:

–  создание HTML-страницы;

–  получение API-ключа;

–  добавление карты в div блок разметки страницы.

Получение API-ключа осуществляется через Google API Console [1], где создается конкретный проект, для которого будет использоваться карта. Рабочее окно Google API Console представлено на рисунке 3.

Рисунок 3. Рабочее окно Google API Console

Далее в Google API Console добавляются учетные данные, тип учетных данных (в нашем случае тип учетных данных – Maps JavaScript API), а также задаются ограничения для ключа (при необходимости). После заполнения этих полей выдается ключ, как показано на рисунке 4.

Рисунок 4. Получение API-ключа

После получения ключа API, значение параметра key в URL-адресе заменяется на свой ключ API. Посредством различных библиотек языка JavaScript можно реализовать различные функции для работы с картой, как представлено на рисунке 5.

Рисунок 5. Добавление произвольных меток на карте

Список литературы:

1.  Google Maps API: https://developers.google.com/maps/?hl=ru, свободный (дата обращения: 24.06.2018)