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>
)
}