Using of Google Maps API in React application

    Introduction

    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.

    About the article

    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 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 you need:

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

        npm install –save react-google-maps

    • Get the API key. It’s used for authentication of Google Maps Geocoding API applications. To get the key you need to click on the link, in “Authentication for standard API – API keys” section, click “Obtain a key” 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 main HTML file (insert the received key into key parameter)

    Utilization

    Let us consider an example of Google Maps display 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’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:

    • 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 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.

    Some nuances of working with components

    Let us consider some nuances of working with components.

    Data receiving from the map

    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 problem of obtaining coordinates of the visible region of the map after their changing

    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.

    Marker display customization

    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:

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

    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 set of Google Maps API. Allows to display any component of React on Google map. Besides, it can display map components in the browser even 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 article) is a component to display 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 use, each component has clear example in the documentation.

    Conclusion

    The react-plugin, сonsidered 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.