main.js

var map, directionsrenderer1, directionsrenderer2, directionsRenderer3; // introduce the map variable first, otherwise it only shows up inside the initialize() function and is unknown outside of it.

// funcion that creates the map
function initialize() {
  // this code here are the functions that make the directions api work
  var directionsRenderer1 = new google.maps.DirectionsRenderer();
  var directionsRenderer2 = new google.maps.DirectionsRenderer();
  var directionsRenderer3 = new google.maps.DirectionsRenderer();
  var directionsService = new google.maps.DirectionsService();
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 8,
    center: {
      lat: 56.15674,
      lng: 10.21076
    }
  });
  directionsRenderer1.setMap(map);
  document
    .getElementById("directionsForm")
    .addEventListener("submit", function(e) {
      e.preventDefault();
      calculateAndDisplayRoute(directionsService, directionsRenderer1, "ac1", "ac4"); // pass the IDs of the elements with start and end points as parameters!
    });
  directionsRenderer2.setMap(map);
  document
    .getElementById("directionsForm")
    .addEventListener("submit", function(e) {
      e.preventDefault();
      calculateAndDisplayRoute(directionsService, directionsRenderer2, "ac2", "ac4");
    });
  directionsRenderer3.setMap(map);
  document
    .getElementById("directionsForm")
    .addEventListener("submit", function(e) {
      e.preventDefault();
      calculateAndDisplayRoute(directionsService, directionsRenderer3, "ac3", "ac4");
    });

  var options = {
    componentRestrictions: {
      country: "dk"
    }
  };

  var acInputs = document.getElementsByClassName("autocomplete");

  for (var i = 0; i < acInputs.length; i++) {
    var autocomplete = new google.maps.places.Autocomplete(
      acInputs[i],
      options
    );
    autocomplete.inputId = acInputs[i].id;
  }
}

function calculateAndDisplayRoute(directionsService, directionsRenderer,  startID, endID) { // additional parameters!
  var mode = document.getElementById("mode").value; 
  var start = document.getElementById(startID).value;  // use them here!
  var end = document.getElementById(endID).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();
        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) {
          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
          });

        });

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