How to make Maps App using React.js + Google Maps API

Published in

Seok Jun Hong

5 min readApr 24, 2021

As a school internship, I had a chance to build a map web application for our school’s art exhibition. This is the final output.

React Google Map Web Application Overview

Step by step, I will show you how to build your own map website.
Basically, we will build a web application that

Shows Locations of the Students’ Artworks on the Google Map as Markers
Shows Descriptions of the Artworks when Users click(touch) Markers through Modal Windows
Shows Real-time User location on the Map

0. Choose Google Maps API for React.js

There is an official Google Maps Javascript API provided by Google. Unfortunately, we need Google Maps API for React.js. There are several choices of React libraries for Google Maps. I will introduce some of the most popular ones.

react-google-maps: 157,154 weekly downloads and it is a complete wrapper of the official Google Maps API. I used this library at first because I thought I only need to check the number of weekly downloads. However, as you can see, its latest update is almost 3 years ago. It turned out that some of the features of the Google Maps API do not work, and many dependency errors show up. For example, in my project, I wanted to restrict map borders to my college. There is a very simple solution in Google Maps API by setting bound options on Map. However, it turned out that the react-google-maps library does not support this feature.
google-map-react: 194,147 weekly downloads and it wraps a small set of Google Maps API. It has some strong features and very easy to use. Beware that this library only supports a small set of Google Maps API. Therefore, check whether it provides features you want to use. If it does, go ahead and use it! In my case, it does not support bound options on the Map. Therefore, I decided to use the other one.
@react-google-maps/api: 148,046 weekly downloads. This library is a complete re-write of react-google-maps. Therefore, it is a complete wrapper for Google Maps API, and it has updated pretty recently. It also supports bound options on the map. Therefore, I decided to use this one.

I decided to use @react-google-maps/api for the Google Maps library on React.js

1. Show Google Maps on the Web

Since this is just a simple website, put MapContainer inside the App function. Also, import bootstrap to use React-Bootstrap.

/src/App.js

/src/MapContainer.js
This is the basic structure to show Google Maps on the web page.

In LoadScript component, we need to provide GoogleMapsAPI Key. Follow the instructions to generate the API key HERE. Store the API key in separate file config.js and use it so that you won’t expose your API key to others.

In GoogleMap component, I set several options such as map style, initial view center, initial zoom, and other options including bound restrictions. You can find more options HERE.

2. Add Markers on the Map

I have put all the information about Markers on a separate JSON file.

/src/data/art_data.JSON

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "ART_ID": 0,
        "TITLE": "Tao Te Ching Ch. 15 for Mezzo-Soprano",
        "DESCRIPTION": "",
        "AUTHOR": "Genevieve Miedema",
        "URL": "https://sites.google.com/..."
      },
      "geometry": {
        "type": "Point",
        "coordinates": [39.640195,-86.861623]
      }
    },
    etc...
  ]
}

To add Markers or any other components on the map, just place it between the <GoogleMap> tags.

It iterates through the data file and generates Marker components with keys and positions relative to the data. You can also set a custom marker image inside the icon param. Now, you will see markers on your map.

3. Modal window for Markers

We want our Markers to be interactive. Let’s set the markers so that when we click them, they will show corresponding descriptions of the marker on the modal window.

/src/mapContainer.js

https://gist.github.com/sjunhong/040d8c09302be8d5ee5a7138664bf320

I have added the state selectedArt to keep track of the user-selected marker and modalShow to toggle the modal window.

Also, I added the onClick event handler that triggers when you click the marker. Therefore, when a user clicks on a specific marker, it will call setSelecteArt and setModalShow methods to store the selected art information and show the modal window.

ArtInfoModal component shows when the state modalShow is true. When a user clicks the X button on the modal, it will set the state modalShow to false to hide the modal window. Also, it passes selectedArt as a prop.

/src/components/modals/ArtInfoModal.js

It uses React-Bootstrap Modal. It shows URL hyperlinks on the modal window only when the data has the data about the URL. I used Row, Col to organized the contents in the modal. Now if you click on a marker, you will see a pop-up modal window.

4. User Location

This is pretty simple. We will use the javascript built-in library called navigator.

First, add userPosition state with latitude and longitude in the MapContainer component

componentDidMount is a method that will call right after the first rendering cycle (when MapContainer has created).
watchPostition method will get the position of the user when the user changes the location. We will store the location in the state of MapContainer.