/Javascript/React/Curved lines on google maps usint react

Curved lines on google maps usint react

import React from "react";
import { GoogleMap, Polyline, useLoadScript } from '@react-google-maps/api'
const containerStyle = {
  width: '100%', //or any other form of width px, em, rem,
  height: '300px',
  margin: '1rem',
  zindex: 1,
};
// must include geometry for curved lines
const libraryList = ['places', 'geometry']
const center = {lat: 0, lng: 0}
const api_Key = "your google api key"
// your gps points to connect in sequence can be from props etc
const path = [
  {lat: -19.079030990601, lng: -169.92559814453}, //first/start
  {lat: 28.2014833, lng: -177.3813083},
  {lat: 39.849312, lng: -104.673828},
  {lat: 16.7249971, lng: -3.00449998}  // last/finish
];
//geodesic: true for curve, otherwise straight lines
const pathOptions = {
  strokeColor: '#FF0000',
  strokeOpacity: 0.5,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.5,
  clickable: false,
  draggable: false,
  editable: false,
  visible: true,
  radius: 30000,
  paths: path,
  geodesic: true,
  zIndex: 2
};

function Map() {
  const {isLoaded, loadError} = useLoadScript({
    googleMapsApiKey: api_Key,
    libraryList,
  })
  if (loadError) return "Error msg or function"
  if (!isLoaded) return "Loading msg or function"
  return (
    <div>
      <h2>A nice map title</h2>
      <GoogleMap 
      	mapContainerStyle={containerStyle} 
      	zoom={2} 
      	center={center}
      	mapTypeId={'satellite'} //can be omitted
      >
        <Polyline 
			path={path} 
			options={pathOptions} 
		/>
      </GoogleMap>
    </div>
  )
}

Similar codes

7 votes186 views2 answers
Hover react
Javascript React
0 vote240 views1 answer
React native progress bar slider
Javascript React
0 vote214 views1 answer
React auto import sometime not working
Javascript React
5 votes276 views4 answers
React route multiple components
Javascript React
29 votes207 views3 answers
Creating react app using npx
Javascript React
9 votes208 views2 answers
React select options
Javascript React
0 vote203 views1 answer
React Fontawesome Thumbs Up/Down rating (showcases background icon hiding)
Javascript React
0 vote288 views2 answers
Toastify react not working
Javascript React
0 vote215 views1 answer
Error: Error: Unable to resolve module `react-native-gesture-handler` from `node_modules\@react-navigation\native\lib\module\Scrollables.js`: react-native-gesture-handler could not be found within the project.
Javascript React
2 votes213 views2 answers
Get value of Autocomplete react
Javascript React