3/26/15 PitchPeekJS v1.0 release!

While this page shows the source code that is used on current tours, there is a new javascript project that is much more useful. This page will stick around while this code is still in use on pitchpeek.com, but soon we'll be running on pitchpeekJS and the code you see below will be deprecated. Why abandon it? Well it's pretty basic and pitchpeekJS is much better. Learn more.

Load Google Maps Api v.3 script, and optionally load jquery for active menu items.

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>

Optionally Load Bootstrap Css for fancy menu.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

Some custom styling...

<style>
html, body, #map-canvas {
	height: 100%;
    margin: 0px;
    padding: 0px
}
#panel {
	position: absolute;
	top: 2px;
	right: 2px;
	width: auto;
	z-index: 5;
	background-color: #fff;
	opacity: 0.85;
}
.pans{
	cursor: pointer; cursor: hand;
}
</style>

Html Markup


   <div id="panel">
	  <ul>
	  <li class="pans" onclick="loadPano(1);" ><a>Swimming</a></li>
	  <li class="pans" onclick="loadPano(2);" ><a>Dining</a></li>
	  </ul>
    </div>
    <div id="map-canvas"></div>
				

And finally, copied from Google's tutorial on streetview overlays, with a little extra, some javascript.


<script>
	var panos = new Array();
	panos[1] = new Array();
	panos[1]['panoid']='NFpaSnK6x2MAAAQXL3sjyw';
	panos[1]['name']='Swimming';
	panos[1]['heading']=-46.6281;
	panos[1]['pitch']=6.12656;
	panos[1]['zoom']=0.66;
	panos[2] = new Array();
	panos[2]['panoid']='dwFEQYodwY0AAAQXL2YgRA';
	panos[2]['name']='Dining';
	panos[2]['heading']=-48.6029;
	panos[2]['pitch']=10.3286;
	panos[2]['zoom']=0;
	var map;
	var panorama;
	var initll = new google.maps.LatLng(0,0);
	function loadPano(id){
		panorama.setPano(panos[id]['panoid']);
		panorama.setPov(/** @type {google.maps.StreetViewPov} */({
			heading: panos[id]['heading'],
			pitch: panos[id]['pitch'],
			zoom: panos[id]['zoom']
		}));
	}
	function initialize() {
		var mapOptions = {
			center: initll,
			zoom: 1,
			streetViewControl: true
		};
		map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
		panorama = map.getStreetView();
		loadPano(1);
		panorama.setVisible(true);
	}
	google.maps.event.addDomListener(window, 'load', initialize);
</script>