Directions service

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="info"></div>
<div id="floating-panel">
  <b>Start: </b>
  <!-- via via US-36 E and I-55 N -->
  <input id="start" value="Kansas City, MO" />
  <br><b>End: </b>
  <input id="end" value="Chicago IL" />
  <br>
  <input id="btn" value="calculate" type="button" />
</div>
<div id="map"></div>
<div id="dirPanel"></div>

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 100%;
}

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

JavaScript

var polyline;

function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {
      lat: 41.85,
      lng: -87.65
    }
  });
  directionsDisplay.setMap(map);
  polyline = new google.maps.Polyline({
    path: [],
    strokeColor: '#0000FF',
    strokeWeight: 3,
    map: map
  });

  var onChangeHandler = function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay, map);
  };
  document.getElementById('btn').addEventListener('click', onChangeHandler);
  calculateAndDisplayRoute(directionsService, directionsDisplay, map);
}
google.maps.event.addDomListener(window, 'load', initMap);

function calculateAndDisplayRoute(directionsService, directionsDisplay, map) {
  directionsService.route({
    origin: document.getElementById('start').value,
    destination: document.getElementById('end').value,
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      // directionsDisplay.setDirections(response);
      renderDirections(response, map);
      var duration = 0; // seconds
      var distance = 0; // meters
      for (var i = 0; i < response.routes[0].legs.length; i++) {
        duration += response.routes[0].legs[i].duration.value;
        distance += response.routes[0].legs[i].distance.value;
      }
      document.getElementById('info').innerHTML = "total distance=" + (distance / 1000).toFixed(2) + " km<br>total duration=" + (duration / 60 / 60).toFixed(2) + " hours";
      var points = polyline.GetPointsAtDistance(distance / (duration / 60 / 60));
      // verify the result
      var request = {
        waypoints: [],
        travelMode: 'DRIVING'
      };
      for (var i = 0; i < points.length; i++) {
        var marker = new google.maps.Marker({
          map: map,
          position: points[i],
          title: "" + i
        });
        if...