Simplified Google Maps JavaScript API in a React App 🌎

A simplified Google Map in a React project

In a previous post I wrote in Frontend Weekly, I explained how to put a pretty awesome Google Map in your React app but not everyone needs all the bells and whistles. This post is how to add a simple Google Map to your React app, just a map and some markers. Other helpful docs are from Google, npm, and Fullstack React.

Step 1: Create your app

First step in any React project is to open your terminal and go to the directory where you’d like it to live. Then run the always amazing package create-react-app with your app’s name.

I did create-react-app react-google-map. And then our amazing npm package does it’s thing. I love using create-react-app because it configures webpack, etc so we don’t have worry about all that configuration 💆🏽‍

Now you’ve got your new React app, yay! 🎉 cd into your project folder and open it up in your fav text editor. We will, unfortunately, have to do a bit of configuration here because the Google Maps API does not mesh well with React — we are going to be using another package google-maps-react which integrates React and Google Maps beautifully.

Because Google Maps doesn’t mesh well with React, we need the package, but the package doesn’t mesh well with React v16 so we’ve gotta mess with some stuff here. Only a minor inconvenience to get our map up and running!

Open your package.jsonand overwrite it with the following code:

{
  "name": "react-google-map", // your project name
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "google-maps-react": "^1.1.0", // adds the google-maps-react
    "react": "^15.6.1", // sets React to v15 for map compatability
    "react-dom": "^15.6.1", // also sets ReactDOM to v15
    "react-scripts": "1.0.13"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "google-maps": "^3.2.1" // adds in google-maps for good measure
  }
}

We need to use the older version of React (unfortunately) because version 16 of React is still incompatible with google-maps-react which I find to be the best package for using the Google Maps API.

Now run npm install and it will install all of your new dependencies. This might take a while to run! ⏰

Step 2: Component Set Up

Since the purpose of this post is about keeping things simple, I am only going to make one component in addition to App.js. For the Google Maps API to work, you need a parent and child component, so you can set that up however you’d like. For this, I will do App.js as the parent component and MapContainer.js as the child.

Parent (App) Component

Here is the structure of my App.js parent component:

What is happening in this component here is basically we’re exporting App wrapped inside the GoogleApiWrapper, allowing it access to all of the functionality of the Google Maps API. When you pass the google props down to the child, it is allowing the child access to the Google Maps API functionality as well. You need an API key from Google, so make sure to get one otherwise you cannot access their API.

Child (MapContainer) Component

Here is the structure of my child component MapContainer.js. We’ve got a few things happening in the component so far:

First, we’re calling our loadMap function when the component mounts.

Then, our loadMap function is doing quite a bit of work. It’s checking that it received the props from its parent App. If it has them, it moves forward with creating the map. Lines 12–13 are setting the props to new names for simplicity.

Lines 15–16 are finding our div with ref='map' (in our render).

Lines 18–22 are configurations for the map, which are necessary. Configs are set as an object and require center and zoom. mapTypeId is optional (default is roadmap however if you’d like terrain or another map, you would add that here). More on map type in the docs.

Line 24 is important because it is creating the map. this.map is the name of our new Google Map. new maps.Map(node, mapConfig) creates our Google Map with the specified configurations at our div with ref='map'.

Lines 29 on are our render function. You’ll see on line 30 that I’ve got a const style. This is important and usually the step people forget! If you don’t specify the dimensions of your Google Map it WILL NOT work! I set mine to 90vw and 75vh which basically means 90% of the window width and 75% of the window height. I like using vh and vw because they resize while px does not.

Last, return a div with ref='map' with your style and boom you should have a wonderful Google Map! 💥 🗺 💃🏽

And there it is! Your new Google Map in a React component 😯

Step 3: Adding Markers

The last part of this is to add markers. You can follow these steps to add one or as many markers as you like to your map. If your map doesn’t need markers then you are done! 💯

This part of the process only requires a few more lines of code. More guidance in the docs from Google.

Lines 10–18 I’ve added a list of 5 locations (court houses in New York City because why not? ️👩🏾‍⚖️) to my MapContainer's state. I will iterate through these to create markers.

Then on lines 43–49, inside the loadMap function, I iterate over the locations in state and create a new Google Maps marker (new google.maps.Marker) for each location. new google.maps.Marker is coming from the google-maps-react package which allows us to connect to the Google Maps API which has a Marker object.

The Marker accepts an object and must contain the position (coordinates of location — sorry not addresses) and the map. Here I’ve also added title so when you hover over the Marker the name of the location appears, but you can also add label which prints directly onto the map. Tbh, label looks a little messy so I’m sticking with title.

And now you should have your incredible Google Map with a bunch of awesome markers! Hooray! 🙌🏽💰😬

Left: Markers with static labels. Right: Markers with hoverable titles.

You can find the GitHub repo for my project here. I hope this was helpful to you! And if you’d like to add more features to your map, you can keep reading my other blog post which includes Info Windows and a Heatmap layer.

If you enjoyed the article, I’d love for you to let me know by giving a clap! 👏🏽

I am currently an assistant instructor at the nonprofit C4Q which helps underrepresented people learn to code and break into tech. You can see more of my code on GitHub or learn more about me on my personal site.