Introduction

Google presents API convenient for working with geographical maps on any platform (Android, iOS, Web). Meanwhile information technology is accompanied past 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.

Nigh the article

This commodity is intended for developers who have working experience with ReactJS and ES6, who can use imported components, create their ain and who know what the property and the state of the react component is.
The commodity describes the employ of Google Maps API in React awarding.
Let's consider the react-plugin, that provides components for working with Google Maps, its installation, usage and some working nuances. Permit'south analyse the basic example of a map display.

The plugin description

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

Installation

To use this plugin yous need:

  • With the help of the parcel manager npm do the following command in the root of the project (to install npm on Windows follow the link)

npm install –salve react-google-maps

  • Go the API key. Information technology's used for authentication of Google Maps Geocoding API applications. To go the key y'all need to click on the link, in "Authentication for standard API – API keys" department, click "Obtain a key" push button, in the appeared window select or create an application and click "Enable API" button
  • Import the script along with the API key for Google Maps API to work in the chief HTML file (insert the received primal into key parameter)

Utilization

Let usa consider an example of Google Maps brandish in react component.

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

  • withGoogleMap is the function for react component creation, intended for the map displaying
  • GoogleMap – the map component itself, to which the necessary parameters are transferred

Next, it'south 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 post-obit to information technology:

  • containerElement is the block, in which the map will be inserted;
  • mapElement – the map's block.

Additional components of the plugin

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

InfoBox – information cake;
MarkerClusterer – cluster markers;
Circle – display of the circular surface 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 together a basis overlay on the map;
InfoWindow – information window (mainly used to display information by clicking on the marker);
KmlLayer – component to display KML data;
Marker – mark;
OverlayView – component that allows to overlay components;
SearchBox – search line;
Polygon – area selection by coordinates (polygon);
Polyline – adding of a line past coordinates;
Rectangle – area selection (rectangle);
StreetViewPanorama – panorama display;
TrafficLayer – road congestion display;
HeatmapLayer – intensity map display.

Some nuances of working with components

Permit us consider some nuances of working with components.

Data receiving from the map

The essence of the problem:

Information technology's necessary to obtain some information from the map that one or some other component doesn't provide.

Solution:

To apply some information from the map it's necessary to go 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 volition exist used.

The trouble of obtaining coordinates of the visible region of the map later their changing

The essence of the problem:

When using onDrag, onDragStart, onDragEnd listeners, information technology may turn out that during the activation of the listener, the coordinates of the map'south visibility surface area, programmatically determined past the getBounds office, will non coincide with the bodily displayed view area. This is easy to verify if yous put a marker in the corner of the map, the coordinates of which you need to get using the getBounds function. Every bit a event, this is reflected in the errors of the program or in its incorrect work.

Solution:

To go the coordinates of the visible region, the getBounds function of the map object is used, obtained after loading the map. Later on that, you tin can get the breadth 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 tin can work with such listeners as onDblClick, onClick, onDrag and others. Whatsoever of these listeners could be used for region coordinates obtaining, but information technology'due south necessary to call back 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.

Marker display customization

The essence of the trouble:

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

Solution:

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

  • markerWithLabel – using this parameter it is indicated that the marker volition be displayed together with the label. Accepts a function to brandish a marker from the label (window.MarkerWithLabel);
  • labelClass – class configuration for label;
  • labelContent – adding content to the label;
  • labelStyle – styles configuration for characterization.

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

Alternatives

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

  • google-map-react is a component that uses a small-scale set of Google Maps API. Allows to display any component of React on Google map. Also, it can display map components in the browser fifty-fifty if Google Maps API isn't loaded. It uses an internal customizable targeting algorithm.
  • react-google-map (don't confuse with react-google-maps described in this commodity) is a component to brandish Google maps along with markers.
  • google-maps-react – declarative react component for displaying Google Maps, with the use of "lazy" loading of dependencies, the current location search.

Using react-google-maps is preferable. A large number of react components, used in Google Maps, is implemented in this plugin. Each component has a large number of parameters for its convenient apply, each component has articulate case in the documentation.

Conclusion

The react-plugin, сonsidered in this commodity, makes it easy to use the possibilities of the Google Maps API in your projection. The considered examples and nuances of working with components will permit you to avoid problems of working with this plugin.