/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

15 votes402 views3 answers
Create react app and tailwind
Javascript React
1 vote359 views3 answers
React native SafeAreaView
Javascript React
9 votes325 views3 answers
React select
Javascript React
1 vote336 views1 answer
Yup only characters regex validation react
Javascript React
0 vote343 views1 answer
How to disable keyboard calender input in material ui datepicker reactjs
Javascript React
0 vote442 views1 answer
Link externo no react
Javascript React
0 vote348 views1 answer
React tooltip doesn't work
Javascript React
0 vote333 views1 answer
Stop from from refresching page react
Javascript React
32 votes324 views1 answer
React touter dom
Javascript React
5 votes309 views2 answers
React hook form
Javascript React