Skip to content

Instantly share code, notes, and snippets.

@goldsmith

goldsmith/index.html

Forked from spicavigo/main.html
Last active December 15, 2015 13:48
Download ZIP

Revisions

  1. goldsmith revised this gist Mar 29, 2013. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -22,9 +22,9 @@
    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);
    manhattan = new google.maps.LatLng(37.447368,-122.179577);
    penn = new google.maps.LatLng(37.445248,-122.17722);
    rf = new google.maps.LatLng(37.449232,-122.185272);
    mapOptions = {
    center: manhattan,
    zoom: 14,
  2. goldsmith renamed this gist Mar 29, 2013. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion main.html → index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@

    <!DOCTYPE html>
    <html>
    <head>
  3. @spicavigo spicavigo revised this gist Mar 28, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion main.html
    View file
    Original file line number Diff line number Diff line change
    @@ -58,7 +58,7 @@
    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].kb+"," + points[i].lb +"&heading="+bearing+"&pitch=-1.62&sensor=false");
    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(){
  4. @spicavigo spicavigo created this gist Mar 28, 2013.
    103 changes: 103 additions & 0 deletions main.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,103 @@

    <!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].kb+"," + points[i].lb +"&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>