Google Maps with React

Morganne Gagne
Apr 9, 2018 · 4 min read

Google Maps is an incredibly powerful tool, and as a new developer, using it is an easy way to elevate your projects. I recently completed Module 4 at the Flatiron School, which served as an introduction to React.js, and I decided to incorporate Google Maps into my final project. My project leveraged Google Maps to display physician data from the BetterDoctors API (a massive database of 1 million+ physicians, dentists, and eye doctors). Here’s a link if you want to check it out — Doc Finder.

Google Maps is very easy to use with React, in thanks to react-google-maps, a package that essentially provides a React component wrapper for the Google Maps API. react-google-maps allows users to use the full functionality of Google Maps Javascript API. Here’s a quick how-to guide on how to use Google Maps in your React project:

Getting Started

Do not use the documentation set forth in the Google Maps Javascript API. Because React works with the “virtual dom,” Google Maps needs to be implemented differently than with HTML/vanilla JS.

  1. Add react-google-maps to your project
$ yarn add react-google-maps

By adding react-google-maps, you now have access to the GoogleMap component, which will allow you to embed a map in your project.

2. Incorporate the GoogleMap component in your code

In all honesty, I found the google-maps-react documentation a bit confusing because it utilizes a HOC, compose, to simplify the map. For those new to React, it might be easier to start without compose. Ultimately, we will need 3 components to get our map up and running: DoctorsMap, DoctorsMapContainer, and DoctorMarker (optional, but necessary if you want to add markers to your map). We can start with DoctorsMap:

It is necessary to import 3 components from the react-google-maps package: GoogleMap, withScriptjs, and withGoogleMap. withScriptjs and withGoogleMap are both HOCs — withGoogleMap initializes the map component (in this case, DoctorsMap), and withScriptjs is what loads the Google Maps Javascript API v3.

Here, the map needs 2 props, defaultZoom and defaultCenter/center. I chose to use center because I wanted the center of the map to change as a user searched in different locations. With defaultCenter, the center of the map remained fixed.

Instead of using compose to give the map component props, I used the container pattern that we’ve been working with at Flatiron:

Here you need to pass in a few more props that are required for HOCs, withGoogleMap and withScriptjs:

withGoogleMap requires:

  • containerElement: ReactElement (needs both height and width, otherwise, the map won’t display!)
  • mapElement: ReactElement

withScriptjs requires:

  • googleMapURL: string (need an API key)
  • loadingElement: ReactElement

Now we have an embedded GoogleMap with the zoom and center location of our choosing, but that isn’t all that exciting. Let’s add some markers. Markers are really easy to use with react-google-maps…we just need to import the Marker component. Markers only require a position prop (formatted as a object of coordinates {lat: someLat, lng: someLng}), but can take a variety of props, depending on how you want them displayed. I decided to use a custom icon to display my markers as stethoscopes. (Even though very few doctors these days actually use stethoscopes 🧐) If you want to use your own icon, make sure to use a .png file. Flaticons has a lot of good icon options.

More Functionality of Google Maps API

The Google Maps API has many interesting features, including:

  • InfoWindow (see left)
  • MarkerCluster
  • TrafficLayer
  • SearchBox: SearchBox can be embedded or standalone (as StandAloneSearchBox), and this is a great tool to harness the power of the Google Search engine. It uses the Google Places library, and also has the ability to provide AutoComplete options.

Apologies for the blurry gif, but below demonstrates the functionality of the embedded SearchBox.

Gif made from example map @ https://tomchentw.github.io/react-google-maps/#searchbox

While React creates an added layer of complexity to add Google Maps to your project, the react-google-maps package provides an easy-to-use wrapper for full Google Maps API functionality. There are many resources and many relevant StackOverflow questions that help make the process very straightforward.

Resources:

Morganne Gagne

Written by

Fullstack Developer • Engineer • Blue Devil

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade