Integrating a Google Maps API w/ your React App

For my final project at Flatiron I decided to use google maps to create a custom map of fake bookstore locations for my app.

Create a Google Cloud Account

(assuming you already have a google account)

Go to console.cloud.google.com, and start a new project.

Create a custom map

1. Once you’ve created your project, navigate to it and then head over to the Google Maps Platform → Map Management → Create New Map ID.

Here you’ll create a map name (make it memorable!), make the map type ‘javascript’ and hit next.

2. Now, head to the Map Styles tab→ Create New Map Style

Make sure ‘Google Map’ is checked off and hit save (it will then allow you to customize the style).

Choose a location to model your map after — I chose NYC and removed the buildings, and many other markings by editing the features.

Once you’re done editing, save and publish your map style.

3. Go back to Map Management and click on your map.

Choose the map style you just created to associate it with your new map.

Make note of the Map ID on this page, you’ll be using this later

4. Click on the ‘APIs’ Tab → Maps JavaScript API → Enable

5. In the menu bar, head over to APIs & Services → Credentials → Create Credentials → API Key (make sure you restrict it if you’re going to make sure project’s code public)

Copy the API Key

Add your map to your React App

There are two ways to do this: If you want to use react-wrapper head here

Otherwise, here’s how I did it:

Here’s a link to google documentation if you want to view it.

1. Within your index.html add:

<script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Replacing YOUR_API_KEY with the API key you saved earlier.

2. Next, add a <div> with the id of ‘map’ wherever you want the map to appear.

3. Now, create a map component and add:

This describes the center of your map and the default zoom on the page

const map = new google.maps.Map(document.getElementById('map'), 
{    center: {lat: 40.728378, lng: -73.993876},    
zoom: 13.5,    mapId: '2ef2dbafe148d19'    });

Make sure to add some styling to your map in your css file.

4. Add your Map component to your App.js and watch your map work!