Custom Street View panoramas

by SaulBurgos

HTML

<input id="inputFileToPreview" type="file" onchange="createPreview();" />
<div id="map"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?v=3.25&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}

JavaScript

var panoramaImage = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/panoReception1024-0.jpg';
var panoramaWidth = 1024;
var panoramaHeight = 512;

function createPreview () {
	
  var filesSelected = document.getElementById("inputFileToPreview").files;

      if (filesSelected.length > 0) {         
         var fileToLoad = filesSelected[0];
         var fileReader = new FileReader();

         fileReader.onload = function(fileLoadedEvent) {
            var srcData = fileLoadedEvent.target.result; // <--- this give us data: base64                        
            
            var img = new Image();
            img.crossOrigin = 'Anonymous';
            img.onload = function() {                              
               var canvas = document.createElement('canvas');
               var ctx = canvas.getContext('2d');
               var dataURL;
               var dimensions = {
                  height: panoramaWidth,
                  width: panoramaHeight
               };

               canvas.height = dimensions.height;
               canvas.width = dimensions.width;
               ctx.drawImage(this,0,0,dimensions.width,dimensions.height);
               panoramaImage =  canvas.toDataURL("image/jpeg",1); 
              	initPano(); //create streetview
               
            };
            img.src = srcData;           
         }

         fileReader.onprogress = function(event) {
            if (event.lengthComputable) {
               console.log('loaded:' + event.loaded);
               console.log('total:' + event.total);               
            }
         };

         fileReader.readAsDataURL(fileToLoad);
      }
  
}

function initPano() {
  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('map'), {
      pano: 'reception',
      visible: true,
      panoProvider: getCustomPanorama
  });
}

function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {  
  return...