spicavigo/main.html

## main.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Drive Google's Streetview Car</title>
    <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry"></script>
    <script>
    var img_index = 0;
    var points = [];
    var computeHeading = google.maps.geometry.spherical.computeHeading;
    var interpolate = google.maps.geometry.spherical.interpolate;
    var imgs=[];
    function initialize(){
        directionsService = new google.maps.DirectionsService();

        manhattan = new google.maps.LatLng(40.7711329, -73.9741874);
        penn = new google.maps.LatLng(40.74971, -73.99155999999999);
        rf = new google.maps.LatLng(40.76048000000001, -73.98376000000002);
        mapOptions = {
          center: manhattan,
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        var rendererOptions = {
          map: map
        }
        directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

        request = {
            origin: penn,
            destination: rf,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            resp = response;
            directionsDisplay.setDirections(resp);
            var temp_points = resp.routes[0].overview_path;
            points = [];
            for(var i=1; i<temp_points.length; i++){
                var npoints = [];
                for (var j=0; j<10; j++){
                    points.push(interpolate(temp_points[i-1], temp_points[i], j/10))
                }
            }
            points = unique(points);
            index = 0;
            for(var i=1; i<points.length; i++){
                bearing = computeHeading(points[i-1], points[i]);
                imgs.push("http://maps.googleapis.com/maps/api/streetview?size=600x300&location="+ points[i].lat()+"," + points[i].lng() +"&heading="+bearing+"&pitch=-1.62&sensor=false");
            }
            img_index=0;
            $('#buffer').load(function(){
                if (img_index == imgs.length-1) {
                    img_index=0;
                    start();
                    return;
                }
                this.src = imgs[img_index];
                img_index +=1;
            }).trigger('load');
          }
        });

    }
    /* From SO */
    function unique(arr) {
        var ret = [arr[0]];
        for (var i = 1; i < arr.length; i++) { // start loop at 1 as element 0 can never be a duplicate
            if (! arr[i-1].equals(arr[i])) {
                ret.push(arr[i]);
            }
        }
        return ret;
    }

    function start(){
        $('#video').attr('src', imgs[img_index]);
        if (img_index == imgs.length-1) return;
        img_index +=1;
        setTimeout(start,300);
    }
    google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas" style="width: 400px; height: 300px"></div>
    <img id="buffer" alt="" style="position:absolute; left:-999px;"/>
    <img id="video" alt="" style="position:absolute; left:410px; top: 10px; width: 600px; height: 300px;"/>
  </body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Drive Google's Streetview Car</title>
	<style>
	html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	}

	</style>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry"></script>
	<script>
	var img_index = 0;
	var points = [];
	var computeHeading = google.maps.geometry.spherical.computeHeading;
	var interpolate = google.maps.geometry.spherical.interpolate;
	var imgs=[];
	function initialize(){
	directionsService = new google.maps.DirectionsService();

	manhattan = new google.maps.LatLng(40.7711329, -73.9741874);
	penn = new google.maps.LatLng(40.74971, -73.99155999999999);
	rf = new google.maps.LatLng(40.76048000000001, -73.98376000000002);
	mapOptions = {
	center: manhattan,
	zoom: 14,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
	var rendererOptions = {
	map: map
	}
	directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

	request = {
	origin: penn,
	destination: rf,
	travelMode: google.maps.DirectionsTravelMode.DRIVING
	};
	directionsService.route(request, function(response, status) {
	if (status == google.maps.DirectionsStatus.OK) {
	resp = response;
	directionsDisplay.setDirections(resp);
	var temp_points = resp.routes[0].overview_path;
	points = [];
	for(var i=1; i<temp_points.length; i++){
	var npoints = [];
	for (var j=0; j<10; j++){
	points.push(interpolate(temp_points[i-1], temp_points[i], j/10))
	}
	}
	points = unique(points);
	index = 0;
	for(var i=1; i<points.length; i++){
	bearing = computeHeading(points[i-1], points[i]);
	imgs.push("http://maps.googleapis.com/maps/api/streetview?size=600x300&location="+ points[i].lat()+"," + points[i].lng() +"&heading="+bearing+"&pitch=-1.62&sensor=false");
	}
	img_index=0;
	$('#buffer').load(function(){
	if (img_index == imgs.length-1) {
	img_index=0;
	start();
	return;
	}
	this.src = imgs[img_index];
	img_index +=1;
	}).trigger('load');
	}
	});

	}
	/* From SO */
	function unique(arr) {
	var ret = [arr[0]];
	for (var i = 1; i < arr.length; i++) { // start loop at 1 as element 0 can never be a duplicate
	if (! arr[i-1].equals(arr[i])) {
	ret.push(arr[i]);
	}
	}
	return ret;
	}

	function start(){
	$('#video').attr('src', imgs[img_index]);
	if (img_index == imgs.length-1) return;
	img_index +=1;
	setTimeout(start,300);
	}
	google.maps.event.addDomListener(window, 'load', initialize);

	</script>
	</head>
	<body>
	<div id="map-canvas" style="width: 400px; height: 300px"></div>
	<img id="buffer" alt="" style="position:absolute; left:-999px;"/>
	<img id="video" alt="" style="position:absolute; left:410px; top: 10px; width: 600px; height: 300px;"/>
	</body>
	</html>