Implement Google Maps in ReactJS

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;

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;

5. Output

Output - Implement Google Maps in ReactJS - Clue Mediator

Thank you for reading. Happy Coding!

Demo & Source Code

Github Repository StackBlitz Project