Implementing the Google Maps API into a React App

Intro

For Phase 4 of our project at the FlatIron School my partner and I decided to emulate some popular rental property websites like StreetEasy and Zillow. A major feature for these sites seem to be a map of the desired area with markers indicating the locations of the rental properties.

StreetEasy

Zillow

Both maps have been tweaked and styled by their respective site developers but at its core they are still accessing Google’s API. After a quick online search the API we are going to work with is Google’s ‘Maps Javascript API.’

Want to read this story later? Save it in Journal.

This is the first time I have come across the Google Cloud Platform, you will need to make a developer account in order to generate an API Key. Thankfully Google offers a recurring $200 credit for Google Maps APIs, roughly 100,000 requests which is more than enough for our simple project.

Google’s Library contains 326 public APIs so there should be plenty to explore in future instances. Once you have located the API key on your profile we can launch a new React app:

Step by step:

Start a new project in your desired directory and run the following code to start a new react app:

npx create-react-app <app-name>

Next install the dependencies:

npm install google-map-react
npm install semantic-ui-react semantic-ui-css

Note that I was already using semantic-ui as the css framework for the rest of the project and we only really need an icon from semantic so you can use a different dependency of your choice. You may also have to add ‘ — force’ to the end of the google-map-react install if errors arise.

If you do choose to use semantic-ui remember to include the following code in your index.js file:

import 'semantic-ui-css/semantic.min.css'

Once the dependencies have been installed you can delete any unnecessary files and clear the app.js file.

Next make 2 component files, one being a Map component and the other being a Marker component. See the following screenshots for example syntax:

Note the location that you should input your Google API Key that you retrieved from your developer profile. Otherwise the map component will not render!

In the above example a single Marker was coded into the GoogleMapReact component and the center of the map was hard-coded in as well. You can replace the center and zoom values with props to make it more dynamic as well as set up functions to have default values instead of hard-coding. But for the purpose of this example I will show a single marker example and multi-marker example.

In order to view the map you’ll need to update the index.css file with the following properties:

Ties back to the className that was updated on the Map component. Other than that you can manipulate the data that you put in anyway you choose. The markers will work as long as the lat and lng props are passed along.

My example was hard coded to be centered on San Fran and the marker to be at the Painted Ladies trio of houses. If you’re unsure of where to get coordinates you can go to google maps and right click anywhere on the map to get latitude and longitude at the point you clicked.

Quick screen cap of what the Map component looks like

The possibilities from here are endless as long as you have the necessary coordinates. Multiple markers can be placed if you map an array of coordinates and pass them down as props to Marker components.

Thanks for following along! This was a quick sneak peek at the new API that I learned during Phase 4 of my journey through the FlatIron School.

For more information on Maps JavaScript API checkout the following link.

Checkout this code sandbox as well to see what a multi-marker map would look like.

📝 Save this story in Journal.