Draw a line between two points on google maps in React

Drawing a line between two points on Google Maps can be a useful feature in many applications, whether it is to show a route between two locations or to mark a boundary.

With the Google Maps JavaScript API, it is easy to draw a line between two points on a map and customize its appearance. In this article, we will explore how to draw a line between two points on Google Maps using the Google Maps JavaScript API and different customization options available.

Demo Application

Output - Draw a line between two points on google maps in React - Clue Mediator

Draw a line between two points on google maps in React

1. Project structure
2. Package dependencies
3. Implementation
4. Output

1. Project structure

• draw-line-google-maps-react

  • node_modules

  • public

    • index.html

  • src

    • App.js
    • GMap.js
    • index.css
    • index.js

  • package-lock.json

  • package.json

  • README.md

2. Package dependencies

You will find the version of the following packages in React application.

react

^18.2.0

3. Implementation

Refer to the following files for implementation.

GMap.js

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

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

  const markerList = [
    { lat: 59.2967322, lng: 18.0009393 },
    { lat: 59.2980245, lng: 17.9971503 }
  ];

  useEffect(() => {

    const drawMarker = (obj) => {
      const marker = new window.google.maps.Marker({
        position: obj,
        map: googleMap
      });
      return marker;
    }

    const drawLine = (marker1, marker2) => {
      const line = new window.google.maps.Polyline({
        path: [marker1, marker2],
        map: googleMap
      });
      return line;
    }

    googleMap = initGoogleMap();

    var bounds = new window.google.maps.LatLngBounds();
    markerList.map(x => {
      drawMarker(x)
      bounds.extend(x);
    });
    googleMap.fitBounds(bounds);

    drawLine(markerList[0], markerList[1]);
  }, []);

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

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

export default GMap;</div>

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}&libraries=geometry`;
    window.document.body.appendChild(googleMapScript);
    googleMapScript.addEventListener("load", callback);
  }
}

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

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

  return (
    <div class="App">
      <h4>Draw a line between two points on google maps in React - <a href="https://www.cluemediator.com">Clue Mediator</a></h4>
      {!loadMap ? <div>Loading...</div> : <gmap>}
      <br>
      <small><b>Note:</b> In order to make it work, you have to set the YOUR_GOOGLE_MAP_API_KEY in App.js file. </small>
    </gmap></div>
  );
}

export default App;
</your_google_map_api_key>

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <react class="strictmode">
    <app>
  </app></react>
);

4. Output

Run your application and check the output in the browser.
Live Demo

That's it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

GitHub Repository StackBlitz Project