google: remove path and draw new path on marker update

src/maps/Google.js

@@ -21,6 +21,8 @@ const Marker = ({ text }) =>
     <p>{text}</p>
   </div>;
 
+let pathPolyLines = [];
+
 export default class Google extends React.Component{
   constructor(props){
     super(props);
@@ -50,6 +52,7 @@ export default class Google extends React.Component{
       pathCopy.push(end)
       this.setState({path: pathCopy})
     } else {
+      console.log("requesting the directions..")
       var start = this.state.path[this.state.path.length-1];
       var proxyurl = "https://cors-anywhere.herokuapp.com/";
       var baseUrl = "https://maps.googleapis.com/maps/api/directions/json?origin="
@@ -107,6 +110,10 @@ export default class Google extends React.Component{
     pathCopy[childKey] = [lat, lng]
     this.setState({path: pathCopy, draggable: true})
     this.getDistance()
+    pathPolyLines.forEach(polyline => {
+      polyline.setMap(null);
+    })
+    this.drawPath();
   }
 
   getDistance = () => {
@@ -116,6 +123,9 @@ export default class Google extends React.Component{
 
   clearPath = () => {
     this.setState({path: [], distance: 0})
+    pathPolyLines.forEach(polyline => {
+      polyline.setMap(null);
+    })
   }
 
   drawPath = () => {
@@ -125,18 +135,19 @@ export default class Google extends React.Component{
       })
       let map = this.state.map
       let maps = this.state.maps
-      new maps.Polyline({
+      pathPolyLines.push(new maps.Polyline({
         path: path,
         geodesic: true,
         strokeColor: "#212529",
         strokeOpacity: 1.0,
         strokeWeight: 4,
         map,
-      });
+      }));
     }
   }
 
   handleApiLoaded = (map, maps) => {
+//    map.setMapTypeId("satellite");
     this.setState({map: map, maps: maps})
   }