Using of Google Maps API in React application

Google presents API convenient for working with geographical maps on any platform (Android, iOS, Web). Meanwhile, it is accompanied by full documentation with clear and useful examples. Work with a map is often used in projects, whether it be Google Maps or Yandex.Maps. Many popular JS frameworks have plugins for working with them.

This article is intended for developers who have working experience with ReactJS and ES6, who can use imported components, create their own and who know what the property and the state of the React component is.

The article describes the use of Google Maps API in React application.
Let’s consider the react-plugin, that provides components for working with Google Maps, its installation, usage and some working nuances. Let’s analyze the basic example of a map display.

React-google-maps is a plugin providing components for displaying and working with Google Maps (link to GitHub). 

To use this plugin, you need:

    npm install –save react-google-maps

Let us consider an example of Google Maps display in react component.

For the map using, it’s necessary to import the following components:

Next, it’s needed to create a component based on the imported GoogleMap using withGoogleMap function:

With the help of the props object, the necessary parameters are transferred to the component.

To display this component, it’s needed to transfer the following to it:

Besides GoogleMap the plugin react-google-maps also provides other components for working with maps (following the links you can view examples of the components display and work with them):

InfoBox – information block;

MarkerClusterer – cluster markers;

Circle – display of the circular area;

DirectionsRenderer – display of the route;

DrawingManager – component that allows to draw some shapes on the map (circles, rectangles, etc.);

FusionTablesLayer – display points on the map;

GoogleMap – Google-map;

GroundOverlay – component that allows to add a ground overlay on the map;

InfoWindow – information window (mainly used to display information by clicking on the marker);

KmlLayer – component to display KML data;

Marker – marker;

OverlayView – component that allows to overlay components;

SearchBox – search line;

Polygon – area selection by coordinates (polygon);

Polyline – adding of a line by coordinates;

Rectangle – area selection (rectangle);

StreetViewPanorama – panorama display;

TrafficLayer – road congestion display;

HeatmapLayer – intensity map display.

Let us consider some nuances of working with components.

The essence of the problem:

It’s necessary to obtain some data from the map that one or another component doesn’t provide.

Solution:

To use some data from the map, it’s necessary to get the map object using the onMapLoad parameter and bring it to a state or a component variable:

In the future, to obtain data from the map, this object will be used.

The essence of the problem:

When using onDrag, onDragStart, onDragEnd listeners, it may turn out that during the activation of the listener, the coordinates of the map’s visibility area, programmatically determined by the getBounds function, will not coincide with the actual displayed view area. This is easy to verify if you put a marker in the corner of the map, the coordinates of which you need to get using the getBounds function. As a result, this is reflected in the errors of the program or in its incorrect work.

Solution:

To get the coordinates of the visible region, the getBounds function of the map object is used, obtained after loading the map. After that, you can get the latitude and the longitude of the necessary angle of the map (for example, getNorthEast ().lat () and getNorthEast ().lng() – getting the latitude and the longitude (of the coordinates) of the upper right corner of the map region):

GoogleMap component can work with such listeners as onDblClick, onClick, onDrag and others. Any of these listeners could be used for region coordinates obtaining, but it’s necessary to remember under what conditions one or another listener works. Using the incorrect listener may lead to obtaining incorrect coordinates. Therefore, to obtain the exact coordinates of the visible region, when they are changed, it is better to use the onBoundsChanged listener.

The essence of the problem:

The standard marker display doesn’t fit. It is necessary to display some information in it that the standard marker behavior doesn’t allow.

Solution:

In order to customize the standard marker or display some information in it, the label, connected with the marker, is used. To this end, additional parameters are passed to the standard Marker component:

To hide the standard marker, the parameter opacity (opacity={0}) is used.

There are others react components to work with Google Maps API. Among them could be distinguished:

Using react-google-maps is preferable. A large number of react components, used in Google Maps, are implemented in this plugin. Each component has many parameters for its convenient use, each component has clear example in the documentation.

The react-plugin, considered in this article, makes it easy to use the possibilities of the Google Maps API in your project. The considered examples and nuances of working with components will allow you to avoid problems of working with this plugin.