/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 vote213 views1 answer
Imagebackground with input inot avoiding react native
Javascript React
0 vote200 views1 answer
React event for modals
Javascript React
3 votes245 views1 answer
React native elements
Javascript React
0 vote216 views1 answer
React js marked import and use
Javascript React
8 votes223 views2 answers
React on link click scroll to top
Javascript React
1 vote238 views1 answer
Get value of input element on button click react
Javascript React
1 vote193 views1 answer
React current path
Javascript React
0 vote191 views2 answers
Why we use react js
Javascript React
0 vote214 views1 answer
React $ r component instance console
Javascript React
4 votes221 views6 answers
React-native shadow generator
Javascript React