/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

0 vote345 views1 answer
React dynamic load script
Javascript React
0 vote355 views1 answer
React native svg size
Javascript React
0 vote349 views1 answer
Add React Router to React Redux CRUD App
Javascript React
21 votes342 views6 answers
React native vector icon
Javascript React
71 votes443 views5 answers
Css react
Javascript React
2 votes363 views2 answers
Export aab bundle react native android
Javascript React
0 vote349 views1 answer
How to detect if ios is in dark mode react native
Javascript React
0 vote411 views1 answer
React router remove location state on refresh
Javascript React
1 vote367 views1 answer
Check if new user in firebase react
Javascript React
0 vote369 views1 answer
Attempted import error: 'useDispatch' is not exported from 'react-redux'
Javascript React