How to implement Google Maps in your React Application using pure JavaScript ?

Embedding Google Maps in the web pages has become very common these days. It becomes very helpful for the user who wants to navigate to the location.

By name it looks very complicated to integrate google maps with your component. But believe me, it is easier than you think.

So, don’t worry. I am here to help you out.

I have created a demo app and my app looks like this.

Looks cool, right ? Lets proceed…

First of all we need a react app in which we have to implement the Google Map. Create a separate folder called “Google Maps” in which your map component will reside.

Let us start preparing the DOM first. Inside Goolge Maps folder, create an index.js file.

I created the below DOM.

Please pay attention to the id “google-map” that I have assigned to the div with “map-container” as the class name. We will use this id later.

Import the SASS or CSS file and beautify your component as per your wish. I won’t get into. (I love doing SASS)

Now, the next part is initializing the map inside the map-container class.

Please look at the code snippet below.

I have created a function called initMap which is called inside renderMap and which in turn has been called inside componentDidMount.

I have initialized two variables called latitude and longitude and have provided them with some values. The map will calculate the exact location of these coordinates using LatLng() function and center the map according to that.

center: new window.google.maps.LatLng(latitude, longitude)

The initMap function contains various attributes like zoom, zoomControl, scaleControl, draggable etc, which you can set either to true or false as per your requirement.

Do you remember I asked you to assign and Id to the div inside which we want to use the map ? Here we are using it.

document.getElementById(“google-map”)

We are almost done now. But, your Google Maps still won’t work. To make it work, we need the Google Maps API key. We have to follow a step by step procedure to get the key.

I have written a separate article on how to produce the Google Maps API key.

Please refer the below link.

https://medium.com/@premdas.92/how-to-produce-the-google-maps-api-key-35d7b574bbdd

Now, when you get the API key, we need to add in into our application.

Please refer the below code snippet.

Inside the <Helmet> tag , add the API Key in the “src”. Do not forget to install and import Helmet.

npm install — save react-helmet

import Helmet from “react-helmet”;

Now, we need to add the Google-Maps styles. We can change the theme as well.

Create a separate folder called “MapThemes” inside “GoogleMaps” folder.

Inside MapThemes create a JS file by any name you want. Like NightTheme.js for night theme OR SilverTheme.js for silver theme.

To change the theme, go to the following link

https://mapstyle.withgoogle.com/

It looks like this.

You can apply the density of the Roads, Landmarks and Labels as per your requirement and change the theme to Standard, Silver, Dark, Night etc and click on finish. You will get a JSON.

Copy that JSON and paste it inside MapThemes folder, just like I have done here.

Now, import this MAP_STYLES in the index.js file. Like this

import { MAP_STYLES } from “./MapThemes/StandardTheme”;

and add it to the styles attribute.

import { MAP_STYLES } from "./MapThemes/StandardTheme";

Your Map is ready to rock and roll.

You can have various themes for your map. Just copy and paste the generated JSON inside your MapThemes folder.

Your MAP can also look like this :-

Or, like this :-

You can find the whole source code on github:-

https://github.com/premdas92/React-Google-Maps

Thank you for reading this article. Stay in touch !!