Implementing Google Maps in React with google-map-react

William Vetter
3 min readMar 16, 2021
A B C

So a couple months back, my job needed a way to display rental property data on a Google Maps interface, and tasked me with implementing that for deployment to their public-facing application in the very near future.

I hadn’t worked with it in the past, although I was extremely impressed with the other students in my software engineering course at Flatiron School that did decide to implement it in one of their projects.

At first, it can seem really daunting or complicated to try and crack open.

But the truth is, not only were the people at Google thoughtful enough to provide very good documentation, but there are also many libraries that can provide even easier access to the all-powerful and ruling Google Maps.

I highly recommend building it directly from Google themselves, in particular through their Maps Javascript API

If you’d rather a library, I recommend browsing around through Google and see what suits your needs. For the next few posts, I’ll be going over 3 tips for smoothly and securely implementing Google Maps using google-map-react.

1. Hide your API key from the public!

When you’re accessing various REST API endpoints, you’ll typically have a unique key that you sign up for to send in your request. This allows for the API to not be totally open and “public”, allowing the owner of said API to quality control and manage who and how many people can have access.

What some developers can miss when starting out, is writing code like so:

fetch('someAPI.com/example', {
"method": "GET",
"headers": {
"api-key": 'ASDF84njvk29dsdkd9'
}
})

Notice how, in this fetch call, the API key is just directly entered in. This is well and good, and this is usually how you’ll be sending requests with your key.

However, if you push this to a Github repo, and that repo is public, ANYONE can now see that code. And more importantly, anyone can use that key.

This is really bad, if the key you’re using has a use-limit per day, or worse, if it costs money PER call.

The best thing to do is to abstract this key away, inside of a different file. Then to make Github ignore that file when you push. Later, it can be accessed by variable.

To start, create a file at the root of your project called .env

Within this file, create a variable and assign it to the value of your API key:

REACT_APP_GOOGLE_MAPS_KEY = 'ASDF84njvk29dsdkd9'

Next, look for a file called .gitignore. In this, be sure to include .env as one of the files to not upload whenever you commit to Git.

Finally, let’s go back to our fetch call:

fetch('someAPI.com/example', {
"method": "GET",
"headers": {
"api-key": process.env.REACT_APP_GOOGLE_MAPS_KEY
}
})

Same call. But now, we’re referring to our API key by a variable name rather than the actual value.

Now, this file can be safely committed, and you can access your key whenever you like!

Enjoy.

For the next couple blogs, I’ll be covering the next tips on google-map-react:

2. Markers are 100% custom

3. The Documentation is Really Bad

--

--

William Vetter
0 Followers

Full Stack Developer based in Ann Arbor, Michigan. Javascript, Ruby, ReactJS, React Native, and more! 2008–2013 Super Smash Bros professionále