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>