Google Maps in React

Sneh Jogani -

Google Maps is an incredibly powerful tool, as being able to utilize the Google Maps API in a react app not only renders a reliable navigation resource but also improves the overall user experience by incorporating a smooth map interface.

Google Maps can be very easily integrated into any react app, thanks to react-google-maps, a package that essentially provides a React component wrapper for the Google Maps API, or as their documentation suggests:

react-google-maps provides a set of React components wrapping the underlying Google Maps JavaScript API v3 instances.

Getting Started

Step 1

Add react-google-maps package to the project using,

npm install react-google-maps

OR

yarn add react-google-maps

Now, we have access to the GoogleMap component, which will allow us to embed google maps in the our app.

Step 2

Now we need a Google API key in order to use to Google Maps API inside our GoogleMap component. It can easily be obtained from the Google API site.

For basic usage the Maps API key shall suffice.

Step 3

After we have successfully installed the package and procured the Google Maps API key, let us see how to use the component.

import { withScriptjs, withGoogleMap, GoogleMap } from 'react-google-maps'

const MapComponent = withScriptjs(withGoogleMap(props=> {
	return (
		<GoogleMap 
			defaultZoom={12}
			defaultCenter={{ lat: 21.1744336, lng: 72.7954677 }}
		/>
	)
}))

<MapComponent />

It is necessary to import all 3 components from the react-google-maps package. withScriptjs and withGoogleMap are both HOCs - withGoogleMap initializes the map component while withScriptjs loads the Google Map JavaScript API v3.

Here, the map requires 2 props, defaultZoom / zoom - to set the zoom level of the map, defaultCenter / center - to set the center point of the map.

There are a few other props which are required for the HOCs - withScriptjs & withGoogleMap:

withScriptjs requires -

  • googleMapURL: String (Google Map API Key)
  • loadingElement: ReactElement

withGoogleMap requires -

  • containerElement: ReactElement (needs both height & width properties) without which the map won't display.
  • mapElement: ReactElement
import { withScriptjs, withGoogleMap, GoogleMap } from 'react-google-maps'

const MapComponent = withScriptjs(withGoogleMap(props=> {
	return (
		<GoogleMap 
			defaultZoom={12}
			defaultCenter={{ lat: 21.1744336, lng: 72.7954677 }}			
		/>
	)
}))

<MapComponent
	googleMapURL="<---GOOGLE-MAPS-API-KEY--->"
	loadingElement={<div style={{ height: '100%' }} />}
	containerElement={<div style={{ height: '100vh', width: '100vh' }} />}
	mapElement={<div style={{ height: '100%' }} />}
/>

There are other default properties as well which can be used to customize the map, all of which can be passed to the map as follows:

<GoogleMap
	defaultOptions={{
           streetViewControl: true, 
           fullscreenControl: true, 
           mapTypeControl: true,
           zoomControl: true,           
	}}
/>

Step 4

Now that we've setup the basic map, let's add markers to the map.

import { Markers } from 'react-google-maps'

To render any / all components, simply passing them as the child elements to the GoogleMap component suffices.

const MapComponent = withScriptjs(withGoogleMap((props) =>
  <GoogleMap
    defaultZoom={12}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    {props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} />}
  </GoogleMap>
))

<MyMapComponent isMarkerShown /> // Map with a Marker
<MyMapComponent isMarkerShown={false} /> // Only the Map

This will render a map with a marker at the latitude & longitude provided to the position prop of the Marker.

Multiple markers can be added easily by simply adding multiple Marker wrapper component according to the requirement.

More functionalities

Google Maps API has other features which can be implemented using the react-google-maps package such as:

  • InfoWindow - to implement information window over markers.
  • MarkerCluster - to add clusters of markers.
  • Circle - to implement Geo Fence.
  • SearchBox - to utilize the power of the google search engine in your map component.

Even though React adds an extra layer of complexity to add Google Maps to our app, the react-google-maps package provides an easy way to use the wrapper component for full Google Maps API functionality.

Other links: