Rotating Street View Panorama using Google Maps

We can use Google maps street view to build a simple virtual tour, namely automatically rotating street view panorama.

For the setup, we need a specific “div” element holding the panorama.

<div id="panrama" style="width: 400px; height: 400px">
</div>

The solution for automatic rotating is using JavaScript “window.setInterval” to repeatedly position the panorama.

var		pano;
var		latlng = new google.maps.LatLng(38.897526, -77.0370613);

var panoOptions = {
	position: latlng,
	pov: {
		heading: 0,
	    pitch: 0
	}
};

pano = new google.maps.StreetViewPanorama(
	document.getElementById('panorama'), 
	panoOptions);

window.setInterval(function() {
	var pov = pano.getPov();
	pov.heading += 0.2;
	pano.setPov(pov);
}, 10);

“window.setInterval” calls a function repeatedly, with a fixed time delay between each call. It takes two parameters: the first one is a function; the second one is a time interval.

The complete code can be found here: Virtual Tour of the White House.

References

• Google Maps API References: StreetViewPanorama
• Google Maps API Tutorial: Street View
• JavaScript Reference: window.setInterval

Comments

comments