gpiffault/maps-directions.html

## maps-directions.html
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js">
    </script>
    <script type="text/javascript">
      function initialize() {

        var map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: { lat: 42.9994443, lng: -0.0107599},
          zoom: 12
        });

        var fromMarker = new google.maps.Marker({
          map: map,
          position: { lat: 43.1002647, lng: -0.0423151 }
        });

        var toMarker = new google.maps.Marker({
          map: map,
          position: { lat: 42.8906, lng: -0.115006 }
        });

        var ds = new google.maps.DirectionsService();

        ds.route({
          origin: fromMarker.getPosition(),
          destination: toMarker.getPosition(),
          travelMode: google.maps.TravelMode.DRIVING,
          unitSystem: google.maps.UnitSystem.METRIC
        }, function (result, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            console.log(result);

            new google.maps.Polyline({
              map: map,
              path: result.routes[0].overview_path
            });

            var fullPath = [];

            result.routes[0].legs.forEach(function (leg) {
              leg.steps.forEach(function (step) {
                fullPath = fullPath.concat(step.path);
                new google.maps.Polyline({
                  map: map,
                  path: step.path,
                  strokeColor: "red",
                  strokeWeight: 1
                });
              });
            });

            console.log("Overview path length: " + result.routes[0].overview_path.length);
            //console.log("Overview path JSON length: " + JSON.stringify(result.routes[0].overview_path).length);
            console.log("Overview path JSON length: " + JSON.stringify(result.routes[0].overview_path.map(function (point) {return [point.lat(), point.lng()];})).length);
            console.log("Full path length: " + fullPath.length);
            console.log("Full path JSON length: " + JSON.stringify(fullPath.map(function (point) {return [point.lat(), point.lng()];})).length);
          }
        });

      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
<div id="map-canvas"></div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style type="text/css">
	html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
	</style>
	<script type="text/javascript"
	src="https://maps.googleapis.com/maps/api/js">
	</script>
	<script type="text/javascript">
	function initialize() {

	var map = new google.maps.Map(document.getElementById('map-canvas'), {
	center: { lat: 42.9994443, lng: -0.0107599},
	zoom: 12
	});

	var fromMarker = new google.maps.Marker({
	map: map,
	position: { lat: 43.1002647, lng: -0.0423151 }
	});

	var toMarker = new google.maps.Marker({
	map: map,
	position: { lat: 42.8906, lng: -0.115006 }
	});

	var ds = new google.maps.DirectionsService();

	ds.route({
	origin: fromMarker.getPosition(),
	destination: toMarker.getPosition(),
	travelMode: google.maps.TravelMode.DRIVING,
	unitSystem: google.maps.UnitSystem.METRIC
	}, function (result, status) {
	if (status == google.maps.DirectionsStatus.OK) {
	console.log(result);

	new google.maps.Polyline({
	map: map,
	path: result.routes[0].overview_path
	});

	var fullPath = [];

	result.routes[0].legs.forEach(function (leg) {
	leg.steps.forEach(function (step) {
	fullPath = fullPath.concat(step.path);
	new google.maps.Polyline({
	map: map,
	path: step.path,
	strokeColor: "red",
	strokeWeight: 1
	});
	});
	});

	console.log("Overview path length: " + result.routes[0].overview_path.length);
	//console.log("Overview path JSON length: " + JSON.stringify(result.routes[0].overview_path).length);
	console.log("Overview path JSON length: " + JSON.stringify(result.routes[0].overview_path.map(function (point) {return [point.lat(), point.lng()];})).length);
	console.log("Full path length: " + fullPath.length);
	console.log("Full path JSON length: " + JSON.stringify(fullPath.map(function (point) {return [point.lat(), point.lng()];})).length);
	}
	});

	}

	google.maps.event.addDomListener(window, 'load', initialize);
	</script>
	</head>
	<body>
	<div id="map-canvas"></div>
	</body>
	</html>