Miles Marillo
Nov 6 · 3 min read

Integrating Google Maps in your React App

While creating an app, being able to add all of the functionality Google Maps provides is a great — the problem is that it’s difficult to do so within a framework.

Google only provides information about using its Maps API with Vanilla JS; if you’re using a framework like Angular, Vue, or (in this instance) React, you may need third party libraries, which all have troublesome documentation.

The first thing you’ll need is an API key from Google, easily obtainable from them at https://developers.google.com/maps/documentation/. In order to first create a React app, you’ll need to download npm(Node Packet Manager), and type npx create-react-app (name of your app).

When I made my first React App that integrated Google Maps API, I looked at several third party libraries that claimed to offer easy integration; ultimately, I settled on @react-google-maps. You can find it here. In my opinion, it’s the best library that links React and the Google Maps API due to the fact that it’s still continuously updated. There is another, called react-google-maps, that you can find here if you’d like to scout the competition. It took me awhile to figure out which is best, which is why I’m writing this blog!

In order to install the library, type the following into terminal…

npm install --save @react-google-maps/api
# or
yarn add @react-google-maps/api

In the top of your React components, insert the following…

import { GoogleMap, LoadScript } from '@react-google-maps/api'

In order to integrate a map into your component, you want to include the following…

<LoadScript
id="script-loader"
googleMapsApiKey="YOUR_API_KEY"
{...other props}
>
<GoogleMap
id='example-map'
{...other props }
>
...Your map components
</GoogleMap>
</LoadScript>

This will bring up a map on your front end, but you won’t have any markers or functionality enabled! Nevertheless, pat yourself on the back, as this took me a couple of days to get working prooperly. Once your patting is through, get ready to add markers and functionality, as shown below …

import { InfoWindow } from '@react-google-maps/api'
import { Marker } from '@react-google-maps/api';

// Initial state is empty and when a marker is clicked, the info is populated
state = {
locationInfo: null
}

// Create a method that handles the event when a marker is clicked
handleMarkerOnClick = (locationInformation) => {
this.setState({
locationInfo: locationInformation
})
}

// In the render method:
// A Marker on the map that has an onClick event handler
<Marker
onClick={this.handleMarkerOnClick({lat: 33.772, lng: -117.214})}
position={{
lat: 37.772,
lng: -122.214
}}
/>

// Ternary that set the condition of whether an information window is shown after a marker is clicked
{ this.state.locationInfo ?
<InfoWindow
onLoad={infoWindow => {
console.log('infoWindow: ', infoWindow)
}}
position={{lat: this.state.locationInfo.lat, lng: this.state.locationInfo.lng}}
>
<div style={{
background: 'white',
padding: 15,
maxWidth: 400,
maxHeight: 250,
}}>
<h1>InfoWindow</h1>
</InfoWindow>
:
null
}

At this point, you’ll have a map, giving you a marker with an event handler to deal with clicks. As the developer, you’ll have complete autonomy to decide where the marker is and what will happen when your user clicks the marker; and in Google’s great generosity, you’ll be able to get a lot of clicks and site traffic before they come asking for money. To further explore your project, you’ll want to look here for the documentation, but you’re well on your way to an amazing Google Maps API project!