var directionsRenderer;

var direResponse;

var result;

var pointPrKm = 3;

var totalScore = 345;

​

function setup() {

  createCanvas(400, windowWidth);

  initMap();

  calculateAndDisplayRoute(directionsService, directionsRenderer, "roskilde", "Magasin Rødovre");

}

function draw() {

  background(0);

  text("totalScore:" + totalScore, 70,500);

  if(result != null)

  {

    fill(255);

    textSize(40);

    var distance = result.routes[0].legs[0].distance.value/1000;

    text("Distance:" + distance,40,40);

    //text("You will receive " + distance * pointPrKm + " points when you arrive at your desitnation",40,80, 400);

  text("Congratulations - " + distance * pointPrKm + " points added to your score",40,80, 400);

  }

}

​

function gotResponse(dirresult)

{

  result = dirresult;

  print(result);

}

​

function initMap() {

  directionsService = new google.maps.DirectionsService();

  directionsRenderer = new google.maps.DirectionsRenderer();

  const mapx = new google.maps.Map(document.getElementById("mapx"), {

    zoom: 7,

    center: { lat: 41.85, lng: -87.65 },

  });

​

  directionsRenderer.setMap(mapx);

}

​

function calculateAndDisplayRoute(directionsService, directionsRenderer,from,to) {

  directionsService

    .route({

      origin: {

        query: from,

      },

      destination: {

        query: to,

      },

      travelMode: google.maps.TravelMode.DRIVING,

    })

    .then((response) => {

      directionsRenderer.setDirections(response);

      gotResponse(response);

    })

    .catch((e) => window.alert("Directions request failed due to " + status));

}

​