1import React from "react";
2import { GoogleMap, Polyline, useLoadScript } from '@react-google-maps/api'
3const containerStyle = {
4  width: '100%', //or any other form of width px, em, rem,
5  height: '300px',
6  margin: '1rem',
7  zindex: 1,
8};
9// must include geometry for curved lines
10const libraryList = ['places', 'geometry']
11const center = {lat: 0, lng: 0}
12const api_Key = "your google api key"
13// your gps points to connect in sequence can be from props etc
14const path = [
15  {lat: -19.079030990601, lng: -169.92559814453}, //first/start
16  {lat: 28.2014833, lng: -177.3813083},
17  {lat: 39.849312, lng: -104.673828},
18  {lat: 16.7249971, lng: -3.00449998}  // last/finish
19];
20//geodesic: true for curve, otherwise straight lines
21const pathOptions = {
22  strokeColor: '#FF0000',
23  strokeOpacity: 0.5,
24  strokeWeight: 2,
25  fillColor: '#FF0000',
26  fillOpacity: 0.5,
27  clickable: false,
28  draggable: false,
29  editable: false,
30  visible: true,
31  radius: 30000,
32  paths: path,
33  geodesic: true,
34  zIndex: 2
35};
36
37function Map() {
38  const {isLoaded, loadError} = useLoadScript({
39    googleMapsApiKey: api_Key,
40    libraryList,
41  })
42  if (loadError) return "Error msg or function"
43  if (!isLoaded) return "Loading msg or function"
44  return (
45    <div>
46      <h2>A nice map title</h2>
47      <GoogleMap 
48      	mapContainerStyle={containerStyle} 
49      	zoom={2} 
50      	center={center}
51      	mapTypeId={'satellite'} //can be omitted
52      >
53        <Polyline 
54			path={path} 
55			options={pathOptions} 
56		/>
57      </GoogleMap>
58    </div>
59  )
60}