main.js

function calculateAndDisplayRoute1(directionsService, directionsRenderer1) {
  var mode = document.getElementById("mode").value;
  var start = document.getElementById("ac1").value;
  var end = document.getElementById("ac4").value;

  directionsService.route({
      origin: start,
      destination: end,
      travelMode: google.maps.TravelMode[mode]
    },
    function(response, status) {
      if (status == "OK") {
        route_length = response.routes[0].overview_path.length;

        urlorigin =
          "/origin?lat=" +
          response.routes[0].overview_path[0].lat() +
          "&lng=" +
          response.routes[0].overview_path[0].lng();
          
          
        // also using the /origin app route here!
        urldestination =
          "/origin?lat=" +
          response.routes[0].overview_path[route_length - 1].lat() +
          "&lng=" +
          response.routes[0].overview_path[route_length - 1].lng();

        console.log(urlorigin);
        console.log(urldestination);

        // turns ot we DO need jQuery's ajax function
        $.ajax({
          url: urlorigin,
        }).done(function(data) {
        
          // use addGeoJson instead of loadGeoJson:
          map.data.addGeoJson(data);
          // ...do more with the data here to fill in the boxes at the bottom

          // when the first query is complete and processed,
          // head on to the second one. Thay way you can have just one
          // app route in the server.py:
        }).then(function(){

          // same thing as before, but for the destination
          $.ajax({
            url: urldestination,
          }).done(function(data) {
            map.data.addGeoJson(data);
            // Do more with the data here to fill in the boxes at the bottom
          });

        });

        directionsRenderer1.setDirections(response);
      } else {
        window.alert("Directions request failed due to " + status);
      }
    }
  );
}