A Pen by Nick Bennett.

BbhaJ.markdown

BbhaJ

Forked from Anonasaurus Rex's Pen Iwqmz.

A Pen by Nick Bennett on CodePen.

License.

index.html

<div style="width:800px; height:400px;" id="canvas_streetviewpanorama"></div>
<script type="text/javascript">
// CHANGE THE BELOW URL
var embed_url = "https://maps.google.com/maps?q=1516+W+Arthur+Ave,+Chicago,+IL&hl=en&ll=41.999942,-87.668645&spn=0.010796,0.020363&sll=41.999949,-87.668677&layer=c&cbp=13,289.04,,0,13.77&cbll=41.999936,-87.668635&hnear=1516+W+Arthur+Ave,+Chicago,+Illinois+60626&t=m&z=16&iwloc=A&panoid=HAvjga5mCucRKAGYvRxy0g";
// CHANGE THE ABOVE URL

function getUrlVars(url) {
    var vars = [], hash;
    var hashes = url.slice(url.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
    return vars;
}

function getUrlVar(url, name) {
    return getUrlVars(url)[name];
}  

var latlong = getUrlVar(embed_url, 'll').split(',');
// #################
// LOCATION SETTINGS
// #################
var latitude = parseFloat(latlong[0]);
var longitude = parseFloat(latlong[1]);
var panoid = getUrlVar(embed_url, 'panoid');

// #############
// MORE SETTINGS
// #############

var zoom = 1.1;
// increment controls the speed of panning
// positive values pan to the right, negatives values pan to the left
var increment = 0.2;
var interval = 30;
var chevrons = false;
var closebutton = false;
var click2go = false;
var address = "";
var pan = "";
var doubleClickZoom = false;
var imageDateControl = false;
var scrollwheel = false;
var zoom_pos = "";
var zoom_size = "";
var zoom_start = 1.1;
var fullscreen = false;
//

var fullscreen_width;
var fullscreen_height;
var panorama;
var timer;
if(typeof(mode)=="undefined") {
  var mode = "undefined";
}

function init_gl() {
  if(mode == "webgl") {
    var c = document.getElementsByTagName("canvas_streetviewpanorama").item(0);
    if(c) {
      c.addEventListener("webglcontextrestored", function(){
        spinIt();
      }, false);
    }
  }
}

function init() {

  if(mode=="undefined") {
    mode = "html4";
    if(window.WebGLRenderingContext) {
      var testCanvas = document.createElement("canvas_streetviewpanorama");
      if(testCanvas) {
        //mode = "html5";
        document.getElementsByTagName("body").item(0).appendChild(testCanvas);
        var webgl_names = new Array();
        webgl_names.push("webgl");
        webgl_names.push("experimental-webgl");
        webgl_names.push("moz-webgl");
        webgl_names.push("webkit-3d");
        for(i=0;i<4;i++) {
          try {
            var context = testCanvas.getContext(webgl_names[i]);
            if (context && typeof(context.getParameter) == "function") {
              mode = "webgl";
              break;
            }
          } catch(e) {
            
          }
        }
        testCanvas.parentNode.removeChild(testCanvas);
      }
    }
  }
  
  var gps = new google.maps.LatLng(latitude,longitude);
  
  var address_control = false;
  var address_control_options = {position:google.maps.ControlPosition.TOP_LEFT};
  if(address != "") {
    address_control = true;
    address_control_options = {position:address};
  }
  
  var pan_control = false;
  var pan_control_options = {position:google.maps.ControlPosition.TOP_LEFT};
  if(pan != "") {
    pan_control = true;
    pan_control_options = {position:pan};
  }
  
  var zoom_control = false;
  var zoom_control_options = {position:google.maps.ControlPosition.TOP_LEFT,style:google.maps.ZoomControlStyle.DEFAULT};
  if(zoom_pos != "") {
    zoom_control = true;
    zoom_control_options = {position:zoom_pos, style:zoom_size};
  }
  
  var disableDoubleClickZoom = true;
  if(doubleClickZoom) {
    disableDoubleClickZoom = false;
  }
  
  var panoramaOptions = {
    pano: panoid,
    pov: {
      heading: 0,
      pitch:0,
      zoom:zoom    },
    clickToGo: click2go,
    scrollwheel: scrollwheel,
    zoomControl: zoom_control,
    zoomControlOptions: zoom_control_options,
    panControl:pan_control,
    panControlOptions:pan_control_options,
    visible:true,
    mode:mode,
    addressControl:address_control,
    addressControlOptions:address_control_options,
    linksControl:chevrons,
    disableDoubleClickZoom:disableDoubleClickZoom,
    imageDateControl:imageDateControl,
    scrollwheel:scrollwheel,
    enableCloseButton:closebutton,
    position: gps
  };
  
  var canvas = document.getElementById("canvas_streetviewpanorama");
  panorama = new google.maps.StreetViewPanorama(canvas, panoramaOptions);
  google.maps.event.addListener(panorama, 'closeclick', function() {
    show_map();
  });
  
  panorama.setPano(panoid);
  
  google.maps.event.addListener(panorama, 'pano_changed', function() {
    panoid = panorama.getPano();
  });
  
  if(canvas.onmouseover == null) {
    start_spin();
    setTimeout("init_gl();",1000);
  }
  canvas.onmouseover = stop_spin;
  canvas.onmouseout = start_spin;  
}

function show_map() {
  var canvas = document.getElementById("canvas_streetviewpanorama");
  canvas.onmouseover = function(){};
  canvas.onmouseout = function(){};
  stop_spin();
  
  var gps = new google.maps.LatLng(latitude,longitude);
  var map_options = {
    center: gps,
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var canvas = document.getElementById("canvas_streetviewpanorama");
  panorama = new google.maps.Map(canvas,map_options);
  
  var mopts = {
    map: panorama,
    position: gps,
    visible: true
  };
  var marker = new google.maps.Marker(mopts);
  
  google.maps.event.addListener(marker, 'click', function() {
    init();
  });
  
}

function spinIt() {
  try {
    var pov = panorama.getPov();
    pov.heading += increment;
    while(pov.heading > 360.0) {
      pov.heading -= 360.0;
    }
    while(pov.heading < 0.0) {
      pov.heading += 360.0;
    }

    panorama.setPov(pov);
  } catch(e) {}
}

function stop_spin() {
  clearTimeout(timer);
}

function start_spin() {
  clearTimeout(timer);
  timer = setInterval("spinIt()",interval);
}

function goto_fullscreen() {
  var canvas = document.getElementById("canvas_streetviewpanorama");
  if(typeof(document.webkitCancelFullScreen) != "undefined") {
    canvas.webkitRequestFullScreen();
    fullscreen_width = canvas.clientWidth;
    fullscreen_height = canvas.clientHeight;
    canvas.style.width="100%";
    canvas.style.height="100%";
    document.addEventListener("webkitfullscreenchange", function () {
      if(!document.webkitIsFullScreen) {
        var c = document.getElementById("canvas_streetviewpanorama");
        c.style.width = fullscreen_width + "px";
        c.style.height = fullscreen_height + "px";
      }
    }, false);
  } else if(typeof(document.mozCancelFullScreen) != "undefined") {
    console.log("moz");
    canvas.mozRequestFullScreen();
    fullscreen_width = canvas.clientWidth;
    fullscreen_height = canvas.clientHeight;
    canvas.style.width="100%";
    canvas.style.height="100%";
    document.addEventListener("mozfullscreenchange", function () {
      if(document.mozFullScreenElement == null) {
        var c = document.getElementById("canvas_streetviewpanorama");
        c.style.width = fullscreen_width + "px";
        c.style.height = fullscreen_height + "px";
        google.maps.event.trigger(panorama, 'resize')
      }
    }, false);
  }
}

if(typeof(script)=="undefined") {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://maps.googleapis.com/maps/api/js?&sensor=false&callback=init";
  
  if(typeof(maps_api_key)!="undefined" && maps_api_key!="") {
    script.src += "&key="+maps_api_key;
  }
  document.body.appendChild(script);
}
</script>