# question

function travelTimeInfo(controlDiv, map, travelTimeVal) {
  // Set CSS for the control border.
  var previousResult = document.getElementById("controlUI");
  if (!previousResult){
    var previousResult = document.createElement("div");
    previousResult.style.display = "none";
  }
  var controlUI = document.createElement("div");
  controlUI.style.display = "none";
  controlUI.style.backgroundColor = "#fff";
  controlUI.style.border = "2px solid #fff";
  controlUI.style.borderRadius = "2px";
  controlUI.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlUI.style.height = "25px";
  controlUI.style.width = "260px";
  controlUI.style.marginTop = "10px";
  controlUI.style.marginLeft = "10px";
  controlUI.style.alignContent = "space-around";
  controlUI.innerHTML =
    "<h6 style='text-align: center;'><b>Travel-Time: " +
    travelTimeVal +
    " minutes</b></h6>";
  controlUI.style.display = "block";
  controlUI.setAttribute("id", "controlUI");
  controlDiv.appendChild(controlUI);

}

function showTravelTime(data) {
  // Create information box for travel time
  var previousResult = document.getElementById("journeyTime");
  if (previousResult){
    previousResult.remove();
  }
  travelTimeDiv = document.createElement("div");
  travelTimeDiv.setAttribute("id", "journeyTime");

  var travelTime = travelTimeInfo(travelTimeDiv, map, data);
  console.log(travelTimeDiv);

  map.controls[google.maps.ControlPosition.LEFT_TOP].push(travelTimeDiv);

  var details = document.getElementById("details");
  map.controls[google.maps.ControlPosition.LEFT_TOP].push(details);

  document.getElementById("details").style.display = "block";
}