How to integrate Google Maps into your React application

This will be a stepped process of embedding google maps into your application. This process assumes that you already have a React application running, and that you are in the required directory of that application.

Step one.

First, we need to import the necessary dependencies to set up the map.

npm i react-google-maps 

Step two.

Next, we need an API key. In order to do this, you will need to create an account to use the Google Cloud Platform Console, and set up billing information for that account (this is necessary although you won’t be charged unless your key exceeds it’s rate limit).

The Google developers platform has a very thorough and useful walk-through for grabbing an API key for your maps, which you can access here: https://developers.google.com/maps/documentation/javascript/get-api-key

The primary things to consider when generating your API key should be guided by the requirements of your project.

At this point, and for the purpose of this walk-through, we will be enabling only the Maps JavaScript API and the Geocoding API, which will be the minimum we need to get started. However, there are a multitude of other API’s which you can explore or play around with to bolster/ customise your map. One such API is the Places API, which is used frequently in conjunction with the other two API’s. Places Search and Places Autocomplete are two features of this API which have been popularised for their ability to return place predictions based on a user’s location or search string.

If you are interested in implementing this functionality, there are a variety of resources available on the internet which can guide you, but by far the most resourceful for me has been Google Map’s own Places Documentation.

Now you’ve created your API key you can begin to use it in your application.

Remember if you explicitly include your API key anywhere in your application, it will be visible to anyone who may have access to your source code. To prevent a leak and potential misuse of your API key, you can hide or secure your key. To do so:

Internally 
1. Create a .env file in the directory of your project 
2. In that file, create a variable called 
                REACT_APP_GOOGLE_MAPS_API_KEY="your-key"
   and set the value of that variable to whatever your key is. 
3. Reference your key anywhere in your application by calling 
  
               process.env.REACT_APP_GOOGLE_MAPS_API_KEY
4. Don't forget to add .env to your .gitignore file (if it isn't there already) to prevent this file from being uploaded with your commits to GitHub. 

Externally
1. You can also restrict your key, in your Google Cloud Platform Console by going to Credentials > API Keys > Key Restrictions
2. You can do so by setting Application restrictions which dictate which IP addresses or websites can use your key
3. Or you can set API restrictions which control which enabled APIs your key is able to call 

Step three.

Now you’ve set up your key, it’s time to start on rendering the map. Firstly, we need to import the features we want from our React Google Maps dependency — here we’ll be importing the Map feature, as well as the GoogleApiWrapper, a Higher-Order component that accepts a configuration object which has to include ourapiKey.

import {Map, GoogleApiWrapper} from 'google-maps-react';

export class MapContainer extends React.Component {
  render() {
    return (
      <Map 
         google={this.props.google}>
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY
})(MapContainer)

Note: There are other features which are commonly added to maps including the Marker feature and the InfoWindow feature. The inclusion and set up of these elements is discussed in detail in this blog: https://www.newline.co/fullstack-react/articles/how-to-write-a-google-maps-react-component/.

Step four.

Currently, although we have a reference to our google object (the map), the map itself cannot render without a respective width/height container. This is usually passed down to the map as a prop, alongside a number of additional props that are readily available for customising your map. These include:

1. style — this is the CSS style component usually specifying height and width of the map container.
2. initialCenter — this defines the center of the map which displays once the map has initially loaded. It will contain latitude and longitude numbers.
3. zoom — this is the default zoom or initial scale of the map upon loading. The higher the number, the tighter the focus on the map’s center.

These different props can be stored as objects (as illustrated below) and referenced from within your Map component. Although it is common to store these objects within your render method, by storing these in variables outside of your map component, you can avoid any potential conflicts that may arise from re-rendering of the map while your application is running.

...
const defaultZoom = {8} 
const center = {
  lat: 51.311280,
  lng: 0.051410
}
const mapStyle = { 
  height: "100vh",
  width: "100vw"
} 
export class MapContainer extends React.Component {
  render() {
    return (
      <Map 
         google={this.props.google}
         zoom={defaultZoom} 
         initialCenter={center}
         style={mapStyle} 
      >
      </Map>
    );
  }
}
...

One step further…

If you want to take map styling that one step further, you can add some further customisation by visiting snazzymaps.com.

Here you can find a community-driven repository of different styles from which you can use to customise your Google Maps. To incorporate one of these styles, all you have to do is:

1. Pick your favourite style and save the Javascript Type Array to a file in your directory. The name of this file can be whatever you like, but I opted for customMapStyle.js.
2. In this file, make sure to export the JSON object as such:

export default [
        [
         { 
          "featureType": "administrative",
          "elementType": "all",
          "stylers": [
                {
                 "visibility": "on"
                 }
  ...

3. Import the file you just created into the file with your map component. You can do this like below:

import customMapStyle from './customMapStyle'

4. Save it to an object named options and pass it to your map as a style parameter.

const options = {
    style: customMapStyle
}
export class MapContainer extends React.Component {
  render() {
    return (
      <Map 
         google={this.props.google}
         style={options} 
      >
      </Map>
    );
  }
}

Or, if you are feeling particularly creative, SnazzyMaps have a feature where you can submit your own custom map style.

Conclusion

I hope you found this article helpful, and if you have any feedback or further suggestions for improving the article — please feel free to get in touch. Happy coding!