Google streetview

by Wolf

HTML

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map" style="height: 400px;"></div>

CSS

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}

h1, p {
  margin: 0;
  padding: 0;
}

JavaScript

var firstPano = '0100.jpg';
var secondPano = '099.jpg';
var panorama;

google.maps.event.addDomListener(window, "load", function () {
	
  var streetViewPanoramaOptions = {
  	pano: firstPano,
		mode: 'html5',
		zoom: 0.2,
		maxZoom: 1,
		minZoom: 0.2,
		clickToGo:true,
		linksControl: true,
		scrollwheel: true,
		pov: {
			heading: 0,
			pitch: 0
		},
		panoProvider: getCustomPanorama
  };
  
  panorama = new google.maps.StreetViewPanorama(document.getElementById('map'), streetViewPanoramaOptions);
  
});

	function getCustomPanoramaUrl(pano) {
    if (pano === firstPano) {
    	return 'https://github.com/lesitevideo/kinostitch/raw/master/stitched/0100.jpg';
    } else {
    	return 'https://github.com/lesitevideo/kinostitch/raw/master/stitched/0099.jpg';
    }   
  }

 function getCustomPanorama(pano) {
        if (pano === firstPano) {
          return {
            location: {
              pano: firstPano,
              description: 'first pano'
            },
            links: [{
            	heading: 180,
            	description: 'to second pano',
            	pano: secondPano
          	}],
            copyright: 'Imagery (c) 2017 Kinoki.fr',
            tiles: {
              tileSize: new google.maps.Size(1024, 1024),
              worldSize: new google.maps.Size(1024, 1024),             
              getTileUrl: getCustomPanoramaUrl
            }
          };
        } else if(pano === secondPano){
        	return {
            location: {
              pano: secondPano,
              description: 'second pano'
            },
            links: [{
            	heading: 0,
            	description: 'to first pano',
            	pano: firstPano
          	}],
            copyright: 'Imagery (c) 2017 Kinoki.fr',
            tiles: {
              tileSize: new google.maps.Size(1024, 1024),
              worldSize: new google.maps.Size(1024, 1024),             
              getTileUrl: getCustomPanoramaUrl
            }
          };
        }
	}