Implementing the Google Maps API in Your React Application

One of my first React applications was a website that used the Google Maps API to show New Yorkers where they can find public recycling bins in their area. After spending some time setting up the map, I thought I’d write a streamlined tutorial for others looking to implement Google Maps in their application.

1) Set up your credentials through Google

First we want to to get our API credentials from Google. Follow the instructions they lay out for you and set up any restrictions you may want. You’ll notice the next section on “Implementing your API key” is written in vanilla Javascript. We’re going to do things a little differently for our React application — we’ll get to that soon!

Now we can select which APIs to enable our key for. From the home page of your Google cloud console, navigate to Menu > APIs & Services > Dashboard. Then click on “Enable APIs and Services”. You’ll find a whole list of APIs you can use! For the purposes of this application, “Maps Javascript API” is what we want. Click that and enable it!

2) Install google-maps-react

There are a number of npm packages that can import Google Maps into your application. This tutorial will be focusing on the most popular one, google-maps-react. In your React project’s directory, run npm install --save google-maps-react then we need our imports, class, and export! Mine look like this:

The GoogleApiWrapper is a higher order component that requires your API key.

3) Render your map!

We’re already at the last step? This is why we love React. Inside our render, we can implement our Map, which has a number of props we can give it.

I define mapStyles at the top along with my imports. This is a common way to quickly style React components. initialCenter takes in a block of coordinates that will tell the map where to focus on when it renders, andcenter will handle how and where to re-render the map — note that currentLocation is just a prop that I’ve defined in my own application. zoom decides the level of zoom the map will render at.

It may look like I just took a screen-shot of Google Maps, but I assure you I did not.

And we have a map in our app!

BONUS! Mark up your map!

We can also mark up our map to let our users see current location, points of interest, or whatever. Luckily, Google Maps React also comes with additional components, including Marker which acts very similar to Map. Just throw the Marker inside the Map wrapper and give it a position location. I also changed its color to purple, because purple.

Now we can actually see where we’re at!

That’s it for me. If you’re looking for more customization, check out npm’s documentation on the Google API Wrapper.

Oh and really quick — if you’re pushing your project to Github or another public repository, *~*~*make sure to hide your API key!*~*~* You’re gonna have a bad time if you don’t. Trust me. Not that I’d know from experience or anything…