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
Draw a line between two points on google maps in React
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 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 ref={googleMapRef} style={{ width: 600, height: 500 }} /> } export default GMap; |
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | 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 className="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> </div> ); } export default App; |
index.js
1 2 3 4 5 6 7 8 9 10 11 12 | 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.StrictMode> <App /> </React.StrictMode> ); |
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..!!
