Примеры работы с Google Maps API

9 сент. 2020 г.

Всем привет! Сегодня хотел бы поделиться примерами работы с 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. При уменьшении масштаба отображается кластер с количеством маркеров. При клике на кластер масштаб увеличивается и отображается список маркеров, либо дочерних кластеров.

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

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

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

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

Маршруты (directions)

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

Высота (elevation)

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

Слои (layers)

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

Панорама (streetview)

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

Полигон (polygon)

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

Линия (polyline)

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

GPX-трэк

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

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

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

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

Теги: Навигация, Геолокация, Google Maps