/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 vote217 views1 answer
Export 'default' (imported as 'Redirect') was not found in 'react-router-dom'
Javascript React
2 votes262 views2 answers
React aws s3 npm
Javascript React
2 votes215 views1 answer
This.setstate is not a function in react native
Javascript React
0 vote215 views1 answer
React native getting old navigation parameter
Javascript React
0 vote244 views1 answer
Change candle color react highcharts
Javascript React
0 vote234 views1 answer
React native keyboard event listener
Javascript React
0 vote221 views1 answer
Multi filtering react
Javascript React
1 vote217 views1 answer
How to create a button with react
Javascript React
0 vote219 views1 answer
Use of parse in react
Javascript React
0 vote206 views2 answers
React social login buttons
Javascript React