Всем привет! Сегодня хотел бы поделиться примерами работы с Google Maps API. До этого, естественно, приходилось их использовать. Чаще всего - просто подключить google maps на сайте и поставить несколько маркеров. В то же время, было интересно попробовать расширенные возможности работы с картами. Пост представляет собой список дополнительных возможностей google maps с небольшими примерами.

Получение API KEY, стоимость использования

Для полноценного использования Google Maps нужно получить API KEY. Это не очень сложно сделать, получение ключа описано в документации. Но интерфейс Google Cloud Platform Console мне показался довольно запутанным, возможно пригодится неофициальное пошаговое руководство.

Для данного примера мне понадобилось включить следующие API:

• Directions API
• Geocoding API
• Maps Elevation
• Maps Embed API
• Maps JavaScript API
• Places API

Стоимость использования описана в таблице. Функционал разделен на 3 группы: Maps, Routes, Places. Каждая функция имеет свою цену. Цены указаны в долларах за 1000 запросов. К примеру, Maps Static API стоит 2$ за 1000 запросов, Geocoding - 5$ за 1000 запросов.

Использование до 200$ в месяц предоставляется бесплатно. Больше $200 необходимо оплачивать. Также предоставляется $300 бесплатного demo на первые 3 месяца использования. В итоге, стоимость использования API сильно зависит от нагруженности и стратегии использования. Предположительно, большинство небольших проектов укладывается в бесплатный лимит.

Карта и маркеры

Здесь все довольно просто. Для отображения карты нужно указать начальные координаты и масштаб. Далее можно добавить 1 или несколько маркеров. Можно добавить всплывающее окно при клике на маркер. Можно поменять иконку маркера.

• Документация
• Пример из тестового проекта с несколькими маркерами.

Группы маркеров (marker clustering)

Для отображения большого количества маркеров можно используется Marker Clustering. При уменьшении масштаба отображается кластер с количеством маркеров. При клике на кластер масштаб увеличивается и отображается список маркеров, либо дочерних кластеров.

• Документация
• Пример из тестового проекта
• Пример с большим количеством маркеров
• Пример использования в проекте 9Round.

Геокодирование (geocode)

Пользователь вводит адрес в произвольном формате или zip код, geocode преобразует адрес в координаты. Затем можно добавить маркер на карту. Также есть reverse geocode, который преобразует координаты в адрес.

• Geocoding
• Reverse Geocoding
• Пример из тестового проекта

Автодополнение (Autocomplete)

Реализует автодополнение при вводе адреса или zip кода. Пользователь видит возможные варианты.

• Документация
• Пример из тестового проекта

Маршруты (directions)

Позволяет строить маршруты на Google Maps. Есть возможность показывать промежуточные пункты и маневры на текстовой панели. Также есть возможность задавать точки с помощью маркеров.

• Простой пример
• Пример с текстовой панелью
• Пример с перемещаемыми точками
• Пример из тестового проекта

Высота (elevation)

Позволяет отображать высоту конкретной точки. Также позволяет отображать профиль высот

• Документация
• Профиль высот
• Пример из тестового проекта

Слои (layers)

Google Maps содержит несколько слоев: Google Maps Data layer, Heatmap layer, KML layer, Traffic layer, Transit layer, Bicycling layer. Соответственно, можно включить отображение определенного слоя и настроить его / добавить объекты.

• Описание слоев
• Traffic layer
• Transit layer
• Bicycling layer
• Пример из тестового проекта

Панорама (streetview)

Google Maps API также позволяет работать с панорамами Street View. Можно получить изображение по заданным координатам. Также можно настроить направление съемки и наклон.

• Документация
• Пример из тестового проекта

Полигон (polygon)

Google Maps поддерживает рисование различных форм. Наиболее сложная из них - полигон. Позволяет выделить произвольную область по точкам. Также есть возможность рисовать прямоугольники и круги. Есть возможность перемещать формы и менять размеры. Полигоны можно использовать для рисования зоны доставки и т.д.

• Простой полигон
• Полигон с дыркой
• Круг
• Прямоугольник
• Редактируемый прямоугольник
• Переносной полигон
• Пример из тестового проекта

Линия (polyline)

Также поддерживается рисование линий. Функция очень похожа на полигон, но линия может быть не замкнутой. И не происходит заштриховывания области. Линии можно редактировать, рисовать по точкам и добавлять оформление. Линии можно использовать, например, для рисования GPX трека.

• Линия
• Редактируемая линия
• Рисование линии по точкам
• Линия со стрелкой
• Пунктирная линия
• Пример из тестового проекта

GPX-трэк

Google Maps не поддерживает GPX треки нативно. Однако есть сторонняя библиотека, которая это реализует. Под капотом используются примитивы, например polyline.

• Инструкция по подключению трека
• Сторонняя библиотека
• Пример из тестового проекта

Дополнительно

Есть некотокрые дополнительные возможности, c которыми я лично не работал, но они выглядят интересно:

• Тепловые карты
• Игра в пазлы из полигонов
• Свободное рисование
• Движение по панораме и обработка событий
• Загрузка данных из GeoJson
• Загрузка данных из GeoRSS

Тестовый проект доступен на github. На этом пока все. Спасибо за внимание.