How to embed a Google Map in Your React App

This tutorial explains how to embed a Google Map in your React app, the easy way using a library! Yay! In writing this I give many thanks the blog posts I learned how to do this from (the ReadMe on the google-maps-react library was particularly instructive, along with its companion blog post). That said, I still wanted to do this post — mostly to fill in the gaps in the areas that were unclear for me.

1. We assume you already have a React app going. From your project directory in terminal, run npm install google-maps-react to get started.

2. Get your API Key for Google Maps. As of writing, you can do that here by clicking the big blue button that says “GET A KEY”.

3. Head into the component where you want to embed the map. I’ll start a boring empty react app that only has boiler plate code in it. My App currently looks like this:

import React, { Component } from ‘react’;
class App extends Component {
 render() {
 return (
 <div className=”App”>
 Hello World
 </div>
 );
 }
}
export default App;

To get started I’ll import Map, Marker, and GoogleApiWrapper from ‘google-maps-react’ and wrap the component in the GoogleApiWrapper as I export. Now my code looks like this:

import React, { Component } from ‘react’;
import { Map, Marker, GoogleApiWrapper } from ‘google-maps-react’
class App extends Component {
 render() {
 return (
 <div className=”App”>
 Hello World
 </div>
 );
 }
}
export default GoogleApiWrapper({
 apiKey: (‘YOUR_API_KEY_HERE’)
})(App);

4. At this point, all you have to do to add your map is add the Map component in with a prop for the google object. Via some abstraction provided by the library, the google prop helps the Map load. There are some additional optional props you can provide as well. Which I’ll explain next. At this point my code looks like this:

import React, { Component } from ‘react’;
import { Map, Marker, GoogleApiWrapper } from ‘google-maps-react’
class App extends Component {
 render() {
 return (
 <div className=”App”>
 Hello World
 <Map google={this.props.google} />
 </div>
 );
 }
}
export default GoogleApiWrapper({
 apiKey: (‘miaumiauapikey’)
})(App);

and tada, my component renders like this!

Yayyy, a map is on the page!

5. You can pass additional props to your component, including zoom (low numbers are zoomed out and higher zoomed in) — see google documentation on zoom here, and gps coordinates as to where to center your map. The original documentation by the library is actually really useful to understand all the props you can add so feel free to check out the details there. I went ahead and moved my map to center over my hometown, and adjusted the zoom and styles. Now my code looks like this:

import React, { Component } from ‘react’;
import { Map, Marker, GoogleApiWrapper } from ‘google-maps-react’
class App extends Component {
render() {
const style = {
 width: ‘300px’,
 height: ‘300px’
 }
return (
 <div className=”App”>
 Hello World
 <Map 
 google={this.props.google} 
 zoom={10}
 initialCenter={{
 lat: 35.5496939,
 lng: -120.7060049
 }}
 style={style}
 />
 </div>
 );
 }
}
export default GoogleApiWrapper({
 apiKey: (‘miaumiauapikey’)
})(App);

My map now looks like this, resized and nicely centered over my delightful hometown.

Yay!

6. You may note a warning in your console at this point saying that you’re using an old version of Maps. You can resolve this by setting a version at the bottom of the page like so:

export default GoogleApiWrapper({
 apiKey: (‘apikey’),
 version: 3.31
})(App);

7. Adding Markers. Add Markers (and InfoWindows!) by adding the component within your Map component. If you don’t set a location for the marker, it will default to the center of the map. I added a marker like so:

import React, { Component } from ‘react’;
import { Map, Marker, GoogleApiWrapper } from ‘google-maps-react’
class App extends Component {
render() {
const style = {
 width: ‘300px’,
 height: ‘300px’
 }
return (
 <div className=”container”>
 Hello World
 <Map 
 google={this.props.google} 
 zoom={10}
 initialCenter={{
 lat: 35.5496939,
 lng: -120.7060049
 }}
 style={style}>
 <Marker />
 </Map>
 </div>
 );
 }
}
export default GoogleApiWrapper({
 apiKey: (‘apikey’),
 version: 3.31
})(App);

8. and that’s it! The library’s ReadMe is actually pretty instructive. One aspect that confused me at first is the link to the instructional blogpost on the same page. The blog explains how to build your own Map and Marker components from scratch — so I was initially following along with that. I didn’t realize that all you need to do is use the components that the library already built for you. Derp! Happy Mapping.

Questions, feedback, or goat enthusiasm — please let me know! Happy coding.

The end.