Implement Google Maps in ReactJS

by Clue Mediator · January 20, 2020

Today we will show you how to implement google maps in ReactJS. There are many more plugins are available to implement google map but we will show you how to load google map without plugin in ReactJS.

How to use the Google Maps API with React.js, React Apps with the Google Maps API, Building a Google Map in React, Google Maps and React With a Custom Marker, How to embed a Google Map in Your React App, using google maps with react, google-maps-react loading map, multiple markers, react google maps add marker, google maps react package.

Checkout more articles on ReactJS

In this article, we will create simple demo where we will load the google maps with the help of the Google Maps JavaScript API.

1. Create react application

Let’s start with creating the simple react application with the help of the create-react-app. If you don’t know about how to create a react application then refer the below link.

Create React Application

2. Generate google maps API key

We need to create Google Maps API key to load the map in DOM with the help of JavaScript API. Refer below link for it.

https://developers.google.com/maps/documentation/javascript/get-api-key

3. Load google maps script

To load google map, we need to load the google maps script first. On successful load, we have to render the google map to load in DOM element.

App.js

import React, { useState, useEffect } from 'react';
import GMap from './GMap';

// API key of the google map
const GOOGLE_MAP_API_KEY = '<YOUR_GOOGLE_MAP_API_KEY>';

// load google map script
const loadGoogleMapScript = (callback) => {
  if (typeof window.google === 'object' && typeof window.google.maps === 'object') {
    callback();
  } else {
    const googleMapScript = document.createElement("script");
    googleMapScript.src = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAP_API_KEY}`;
    window.document.body.appendChild(googleMapScript);
    googleMapScript.addEventListener("load", callback);
  }
}

const App = () => {
  const [loadMap, setLoadMap] = useState(false);

  useEffect(() => {
    loadGoogleMapScript(() => {
      setLoadMap(true)
    });
  }, []);

  return (
    <div className="App">
      <a href="https://www.cluemediator.com">Clue Mediator</a><br /><br />
      {!loadMap ? <div>Loading...</div> : <GMap />}
    </div>
  );
}

export default App;

import React, { useState, useEffect } from 'react';

import GMap from './GMap';

// API key of the google map

const GOOGLE_MAP_API_KEY = '<YOUR_GOOGLE_MAP_API_KEY>';

// load google map script

const loadGoogleMapScript = (callback) => {

if (typeof window.google === 'object' && typeof window.google.maps === 'object') {

callback();

} else {

const googleMapScript = document.createElement("script");

googleMapScript.src = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAP_API_KEY}`;

window.document.body.appendChild(googleMapScript);

googleMapScript.addEventListener("load", callback);

}

const App = () => {

const [loadMap, setLoadMap] = useState(false);

useEffect(() => {

loadGoogleMapScript(() => {

setLoadMap(true)

});

}, []);

return (

<a href="https://www.cluemediator.com">Clue Mediator</a><br /><br />

{!loadMap ? <div>Loading...</div> : <GMap />}

</div>

);

}

export default App;

Here we are checking the google object, if it’s exist then we will skip the loading script. Also we are using the Ternary Operator to load the google map after loading the script.

4. Load google maps

Now we will create separate file to load the map in the DOM element. So first we will initialize the google map with predefined attributes like zoom, center cords, etc.

GMap.js

import React, { useEffect, useRef } from 'react';

const GMap = () => {
  const googleMapRef = useRef(null);
  let googleMap = null;

  useEffect(() => {
    googleMap = initGoogleMap();
    createMarker();
  }, []);


  // initialize the google map
  const initGoogleMap = () => {
    return new window.google.maps.Map(googleMapRef.current, {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8
    });
  }

  // create marker on google map
  const createMarker = () => new window.google.maps.Marker({
    position: { lat: -34.397, lng: 150.644 },
    map: googleMap
  });

  return <div
    ref={googleMapRef}
    style={{ width: 600, height: 500 }}
  />
}

export default GMap;

import React, { useEffect, useRef } from 'react';

const GMap = () => {

const googleMapRef = useRef(null);

let googleMap = null;

useEffect(() => {

googleMap = initGoogleMap();

createMarker();

}, []);

// initialize the google map

const initGoogleMap = () => {

return new window.google.maps.Map(googleMapRef.current, {

center: { lat: -34.397, lng: 150.644 },

zoom: 8

});

}

// create marker on google map

const createMarker = () => new window.google.maps.Marker({

position: { lat: -34.397, lng: 150.644 },

map: googleMap

});

return <div

ref={googleMapRef}

style={{ width: 600, height: 500 }}

}

export default GMap;

5. Output

Output - Implement Google Maps in ReactJS - Clue Mediator — Output – Implement Google Maps in ReactJS – Clue Mediator

Thank you for reading. Happy Coding!

Demo & Source Code

Github Repository StackBlitz Project

If you found value in this article,
you can support us by buying me a coffee! ☕

2 Responses

Comments2
Pingbacks0

igor says:
June 30, 2020 at 12:30 pm
your gmaps API key is visible for the client,
i think the only way to use api keys with billing is only server-side.
although many answers on stackoverflow and many different tutorials tell it like this, if i can console.log(api.Key) its a big threat for they key owner who gets billed.
put the key in the .env file doesnt help, since u use it frontside, u still can log this key.
react hooks are awesome
- Clue Mediator says:
  July 1, 2020 at 6:23 am
  Hello Igor,
  You are right it’s good to use the Google Map key from the server-side.
  But when you are working with SPA and you need to integrate google map then you have to use the key from the client environment. So while you are creating the API for google map then don’t forget to restrict it based on the IP addresses or domain name. Most of the developers are ignoring this part so it’s very dangerous for them.
  We are glad you like the article. Subscribe us for weekly updates or like and follow us for regular updates.
  Happy Coding..!!

Implement Google Maps in ReactJS