google: draw path (not editable)

src/Google.js

@@ -1,5 +1,5 @@
 import React from "react";
-import GoogleMapReact from 'google-map-react';
+import GoogleMapReact from "google-map-react";
 import "./css/maps.css";
 import apiKey from './config/googleApiKey.js';
 import {calcDistance} from './helpers/distance';
@@ -28,7 +28,11 @@ export default class Google extends React.Component{
     distance: 0,
     path: testPath,
     draggable: true
-    }
+  }
+
+  componentDidUpdate(){
+    this.drawPath()
+  }
 
   getRoute = (lng, lat) => {
     let pathCopy = this.state.path.slice();
@@ -77,6 +81,11 @@ export default class Google extends React.Component{
   addMarker = (event) => {
     const lng = event.lng
     const lat = event.lat
+
+//    let pathCopy = this.state.path.slice();
+//    pathCopy.push([lat, lng])
+//    this.setState({path: pathCopy})
+
     this.getRoute(lng, lat);
     this.getDistance()
   }
@@ -100,6 +109,26 @@ export default class Google extends React.Component{
     this.setState({path: [], distance: 0})
   }
 
+  drawPath = () => {
+    let path = this.state.path.map(p => {
+      return {lat: p[0], lng: p[1]}
+    })
+    let map = this.state.map
+    let maps = this.state.maps
+    new maps.Polyline({
+      path: path,
+      geodesic: true,
+      strokeColor: "#212529",
+      strokeOpacity: 1.0,
+      strokeWeight: 4,
+      map,
+    });
+  }
+
+  handleApiLoaded = (map, maps) => {
+    this.setState({map: map, maps: maps})
+  }
+
   render() {
     const position = [this.state.latitude, this.state.longitude]
     return (
@@ -115,6 +144,7 @@ export default class Google extends React.Component{
             draggable={this.state.draggable}
             onChildMouseDown={this.onMarkerInteraction}
             onChildMouseUp={this.updateMarker}
+            onGoogleApiLoaded={({map, maps}) => this.handleApiLoaded(map, maps)}
           >
             {this.state.path.map((pos, idx) =>
               <Marker