zhenyanghua/index.html

## index.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?libraries=geometry&key=AIzaSyA7U_W-DipuiGaONpCHJiCxTF9-plPU4o4">
    </script>
    <script type="text/javascript">
      var map;
      var directionsService = new google.maps.DirectionsService();

      function initialize() {
        var mapOptions = {
          center: { lat: 42.35, lng: -71.10},
          zoom: 14
        };
        map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
        markerA = new google.maps.Marker({
          map: map,
          position: new google.maps.LatLng(42.3505, -71.1056)
        });
        markerB = new google.maps.Marker({
          map: map,
          position: new google.maps.LatLng(42.3405, -71.0756)
        });

        calcRoute();
      }

      function calcRoute() {
        var start = markerA.getPosition();
        var end = markerB.getPosition();
        var request = {
            origin:start,
            destination:end,
            travelMode: google.maps.TravelMode.BICYCLING
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            var pathPoints = response.routes[0].overview_path;
            path = new google.maps.Polyline({
              map: map,
              path: pathPoints,
              geodesic: true
            })

            var distance = google.maps.geometry.spherical.computeLength(pathPoints);
            var duration = 10 * 60;
            var speed = distance / duration;
            var fps = 20;
            var resolution = speed * (1 / fps);

            getFineData(pathPoints, resolution).forEach(function(point) {
              var marker = new google.maps.Marker({
                map: map,
                position: point
              })
            });
          }
        });
      }

      function getFineData(roughData, resolution) {
        var fineData = [];
        var latLngA;
        var latLngB;
        var steps;
        var step;

        for (var i = 1; i < roughData.length; i++) {
          latLngA = roughData[i - 1];
          latLngB = roughData[i];
          distanceDiff = google.maps.geometry.spherical.computeDistanceBetween(latLngA, latLngB);
          steps = Math.ceil(distanceDiff / resolution);
          step = 1 / steps;
          previousInterpolatedLatLng = latLngA;
          for (var j = 0; j < steps; j++) {
            var interpolated = google.maps.geometry.spherical.interpolate(latLngA, latLngB, step * j);
            fineData.push(interpolated)
          }
        }
        console.log(fineData.length)
        return fineData;
      }
      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?libraries=geometry&key=AIzaSyA7U_W-DipuiGaONpCHJiCxTF9-plPU4o4">
	</script>
	<script type="text/javascript">
	var map;
	var directionsService = new google.maps.DirectionsService();

	function initialize() {
	var mapOptions = {
	center: { lat: 42.35, lng: -71.10},
	zoom: 14
	};
	map = new google.maps.Map(document.getElementById('map-canvas'),
	mapOptions);
	markerA = new google.maps.Marker({
	map: map,
	position: new google.maps.LatLng(42.3505, -71.1056)
	});
	markerB = new google.maps.Marker({
	map: map,
	position: new google.maps.LatLng(42.3405, -71.0756)
	});

	calcRoute();
	}

	function calcRoute() {
	var start = markerA.getPosition();
	var end = markerB.getPosition();
	var request = {
	origin:start,
	destination:end,
	travelMode: google.maps.TravelMode.BICYCLING
	};
	directionsService.route(request, function(response, status) {
	if (status == google.maps.DirectionsStatus.OK) {
	var pathPoints = response.routes[0].overview_path;
	path = new google.maps.Polyline({
	map: map,
	path: pathPoints,
	geodesic: true
	})

	var distance = google.maps.geometry.spherical.computeLength(pathPoints);
	var duration = 10 * 60;
	var speed = distance / duration;
	var fps = 20;
	var resolution = speed * (1 / fps);

	getFineData(pathPoints, resolution).forEach(function(point) {
	var marker = new google.maps.Marker({
	map: map,
	position: point
	})
	});
	}
	});
	}

	function getFineData(roughData, resolution) {
	var fineData = [];
	var latLngA;
	var latLngB;
	var steps;
	var step;

	for (var i = 1; i < roughData.length; i++) {
	latLngA = roughData[i - 1];
	latLngB = roughData[i];
	distanceDiff = google.maps.geometry.spherical.computeDistanceBetween(latLngA, latLngB);
	steps = Math.ceil(distanceDiff / resolution);
	step = 1 / steps;
	previousInterpolatedLatLng = latLngA;
	for (var j = 0; j < steps; j++) {
	var interpolated = google.maps.geometry.spherical.interpolate(latLngA, latLngB, step * j);
	fineData.push(interpolated)
	}
	}
	console.log(fineData.length)
	return fineData;
	}
	google.maps.event.addDomListener(window, 'load', initialize);
	</script>
	</head>
	<body>
	<div id="map-canvas"></div>
	</body>
	</html>