JSFiddle - React, Tailwind, and code Playground

by knoxzin1

HTML

<div id="console"></div>

JavaScript

var mytimeArray = [], myDistancArray = [], completed = 0, total = 0;

function showPointsRoutes()
{
    var a = [
        {"lat": 51.5, "lng": 54},
        {"lat": 50.5, "lng": 54},
        {"lat": 52, "lng": 54},
        {"lat": 51, "lng": 54},
        {"lat": 52, "lng": 54}
    ];
    
    total = a.length;
    
  for(var i = 1 ; i < a.length ; i++)
    requestRoute(i, a[i-1], a[i]);
}

showPointsRoutes();

function requestRoute(i, a, b)
{
  window["getRouteResponse" + i] = function(response)
  {
      completed++;
    mytimeArray[i] = response.route_summary.total_time;
    myDistancArray[i] = response.route_summary.total_distance;
      
      if (completed == total - 1) {
          for (var j = 1; j < completed + 1; j++) {
      document.getElementById("console").innerHTML += "Time: " + mytimeArray[j] + "<br /> Distance: " + myDistancArray[j] + "<br /> Position: " + j + "<br /><br /> ";                                     
      }
      }
  };

  var as ="http://routes.cloudmade.com/BC9A493B41014CAABB98F0471D759707/api/0.3/" + a.lat+","+a.lng+","+b.lat+","+b.lng + "/car/shortest.js?callback=getRouteResponse" + i;
  addScript(as);
}

function addScript(url) 
{
  var script = document.createElement('script');
  script.type="text/javascript";
  script.src=url;
  document.getElementsByTagName('head') [0].appendChild(script);
}