Использование Google Maps API в React приложении

October 6, 2017 Jazz Team Технические статьи, 0

Предисловие

Google предоставляет удобный API для работы с географическими картами на любой платформе (Android, iOS, Веб). При этом он сопровождается хорошей документацией с понятными и полезными примерами. Сейчас часто в проектах используется работа с картой, будь то Google Maps, либо Яндекс.Карты. Многие популярные JS-фреймворки имеют плагины для работы с ними.

О статье

Данная статья рассчитана на разработчиков, имеющих опыт работы с ReactJS и ES6, умеющих использовать импортированные компоненты, создавать свои, и знающих, что такое свойство и состояние react-компонента.

В статье речь пойдет об использовании Google Maps API в React приложении.

Рассмотрим react-плагин, предоставляющий компоненты для работы с Google картами, его установку, использование и некоторые нюансы работы. Разберем базовый пример отображения карты.

Описание плагина

React-google-maps - плагин, предоставляющий компоненты для отображения и работы с Google Maps (ссылка на GitHub). Данный плагин является оберткой над стандартным Google Maps API. Он предоставляет react-компоненты, использующие данное API. React-google-maps позволяет быстро и легко добавлять карту, маркеры на ней, прокладывать маршруты и другие вещи, предоставляемые Google Maps.

Установка

Для использования данного плагина необходимо:

• С помощью пакетного менеджера npm выполнить следующую команду в корне проекта (установка npm на Windows по ссылке)

     npm install --save react-google-maps

• Получить ключ API. Он используется для аутентификации Google Maps Geocoding API приложений. Для получения ключа необходимо перейти по ссылке, в разделе “Аутентификация для стандартного API – ключи API” нажать кнопку “Получение ключа”, в появившемся окне, выбрать или создать приложение и нажать кнопку “Enable API”
• Импортировать скрипт вместе с ключом API для работы Google Maps API в главный HTML-файл (в параметр key вставить полученный ключ)

 

Использование

Рассмотрим пример отображения Google Maps в react-компоненте.

Для использования карты нужно импортировать следующие компоненты:

• withGoogleMap - функция для создания react-компонента. Предназначенного для отображения карты
• GoogleMap - непосредственно сам компонент карты, в который передаются нужные параметры

Далее необходимо создать компонент на основе импортированного GoogleMap с помощью функции withGoogleMap:

С помощью объекта props, в компонент передаются нужные параметры.

Для отображения данного компонента, ему необходимо передать следующее:

• containerElement - блок в который будет вставлена карта;
• mapElement - блок карты.

 

 Дополнительные компоненты плагина

Кроме GoogleMap плагин react-google-maps предоставляет и другие компоненты для работы с картами (по ссылкам можно просмотреть примеры отображения компонентов и работы с ними):

• InfoBox - информационный блок;
• MarkerClusterer - маркеры-кластеры;
• Circle - отображение круговой области;
• DirectionsRenderer - отображение маршрута;
• DrawingManager - компонент, позволяющий рисовать некоторые фигуры на карте (круги, прямоугольники и др.);
• FusionTablesLayer - отображение точек на карте;
• GoogleMap - Google-карта;
• GroundOverlay - компонент, позволяющий добавлять наземное наложение на карту;
• InfoWindow - информационное окно (в основном используется для вывода информации по клику на маркер);
• KmlLayer - компонент для отображения KML данных;
• Marker - маркер;
• OverlayView - компонент, позволяющий накладывать компоненты;
• SearchBox - строка поиска;
• Polygon - выделение области по координатам (многоугольник);
• Polyline - добавление линии по координатам;
• Rectangle - выделение области (прямоугольник);
• StreetViewPanorama - отображение панорамы;
• TrafficLayer - отображение загруженности дорог;
• HeatmapLayer - отображение карты интенсивности.

 

Некоторые нюансы работы с компонентами

Рассмотрим некоторые нюансы работы с компонентами.

Получение данных с карты

Суть проблемы: 

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

Решение:

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

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

Проблема получения координат видимого региона карты после их изменения

Суть проблемы: 

При использовании слушателей onDrag, onDragStart, onDragEnd может оказаться, что во время активации слушателя программно определяемые с помощью функции getBounds координаты области видимости карты не будут совпадать с реально отображаемой областью видимости. В этом легко убедиться если поставить маркер в угол карты, координаты которого нужно получить с помощью функции getBounds. Как следствие, это отражается в погрешностях работы программы либо ее неправильной работе.

Решение:

Для получения координат видимого региона используется функция getBounds объекта map, получаемый после загрузки карты. После этого можно получить широту и долготу нужного угла карты (например, getNorthEast().lat() и getNorthEast().lng() - получение широты и долготы (координат) верхнего правого угла региона карты):

Компонент GoogleMap может работать с такими слушателями, как onDblClick, onClick, onDrag и другие. Любой такой слушатель может быть использован для получения координат региона, однако следует помнить при каких именно условиях срабатывает тот либо иной слушатель. Использование неправильного слушателя может привести к получению неправильных координат. Поэтому, для получения точных координат видимого региона, при их изменении, лучше использовать слушатель onBoundsChanged.

Кастомизация отображения маркера

Суть проблемы:

Не подходит стандартное отображение маркера. Необходимо отобразить в нем некоторую информацию, что не позволяет стандартное поведение маркера.

Решение:

Для того чтобы кастомизировать стандартный маркер либо отобразить в нем некоторую информацию используется label, связанный с маркером. Для этого, в стандартный компонент Marker, передаются дополнительные параметры:

• markerWithLabel - с помощью данного параметра, указывается, что маркер будет отображаться вместе label. Принимает функцию для отображения маркера с label (window.MarkerWithLabel);
• labelClass - задание класса для label;
• labelContent - добавление содержимого в label;
• labelStyle - задание стилей для label.

Для скрытия стандартного маркера используется параметр opacity (opacity={0})

Альтернативы

Существуют и другие react-компоненты для работы с Google Maps API. Среди них можно выделить:

• google-map-react - это компонент, использующий небольшой набор Google Maps API. Позволяет отображать любой компонент React на Google карте. Кроме того, он может отображать компоненты карты в браузере, даже если Google Maps API не загружен. Он использует внутренний, настраиваемый алгоритм наведения.
• react-google-map (не путать с описанным в данной статье react-google-maps) - компонент для отображения Google карты вместе с маркерами.
• google-maps-react - декларативный react-компонент для отображения Google Maps, с использованием “ленивой” подгрузки зависимостей, поиска текущего местоположения.

Предпочтительно использование react-google-maps. В данном плагине реализовано большое количество react-компонентов, используемых в Google Maps, каждый компонент имеет большое количество параметров для удобного его использования, в документации у каждого компонента есть наглядный пример.

Заключение

Рассмотренный в данной статье react-плагин позволит легко использовать возможности Google Maps API в своем проекте. Рассмотренные примеры и нюансы работы с компонентами позволят избежать проблем работы с данным плагином.

 

API, Google Maps, Google Maps API, React-google-maps, react-компонент, ReactJS, плагин

Формирование отчетов в BIRT Завершен проект “Веб-приложение для просмотра личных дел сотрудников и студентов”