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

9 Sep 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. На этом пока все. Спасибо за внимание.