google: get route from directions api

src/Google.js

@@ -6,8 +6,6 @@ import {calcDistance} from './helpers/distance';
 import {longitude, latitude, mapWidth, mapHeight, markerIcon, testPath} from "./config/variables";
 
 const svgStyle = {
-  fill: "#343a40",
-  stroke: "none",
   top: "-20",
   left: "-8",
   position: "absolute"
@@ -31,17 +29,54 @@ export default class Google extends React.Component{
     draggable: true
     }
 
+  getRoute = (lng, lat) => {
+    let pathCopy = this.state.path.slice();
+    var end = [lat, lng];
+    if (this.state.path.length < 1){
+      pathCopy.push(end)
+      this.setState({path: pathCopy})
+    } else {
+      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="
+      var url = baseUrl + start[0] + "," + start[1] + "&destination=" + end[0] + "," + end[1] + "&key=" + apiKey;
+      var reqOptions = {
+        method:'GET',
+        mode: 'cors',
+        headers:{
+          'Access-Control-Allow-Origin':'*'
+        },
+      }
+
+      fetch(proxyurl + url, reqOptions)
+        .then(response => response.json())
+        .then(data => {
+          let routes = data.routes
+          if(routes.length > 0){
+            let steps = routes[0].legs[0].steps
+            steps.forEach(step => {
+              pathCopy.push([step.end_location.lat, step.end_location.lng])
+            })
+          } else{
+            pathCopy.push(end)
+          }
+          this.setState({path: pathCopy})
+          this.getDistance()
+        })
+        .catch((error) =>{
+          console.error(error);
+        });
+    }
+  }
+
   onMarkerInteraction = (childKey, childProps, mouse) => {
     this.setState({draggable: false});
   }
-  
+
   addMarker = (event) => {
     const lng = event.lng
     const lat = event.lat
-    console.log("Clicked at", lat, "/", lng)
-    let pathCopy = this.state.path.slice();
-    pathCopy.push([lat, lng]);
-    this.setState({path: pathCopy})
+    this.getRoute(lng, lat);
     this.getDistance()
   }