Google Maps API - Street View Panorama Pano Id Viewer

From NoskeWiki
Jump to navigation Jump to search
Viewing a particular pano_id".


NOTE: This page is a daughter page of: Google Maps API

This piece of code allows you view a particular pano id... in this case "RJd2HuqmShMAAAQfCa3ulg" - a nice aerial panorama above Kiev, Ukraine. You can get pano ids by carefully extracting this string pattern from the URL when viewing a pano in Google maps (typically just after /data=...!1s).

The code below uses the StreetViewPanorama object from the Google Maps API and was based on this example which feeds in a lat/lng instead of a pano id. For my purposes pano is more predictable if I like a pano... the lat/lng just snaps the the nearest one, which may change over time.

Showing a Particular Street View Panorama (by pano id)

<!DOCTYPE html>
    <meta charset="utf-8">
    <title>Street View, Render Particular Pano Id</title>
    <script src=""></script>

 * Sets all our panos to point in a particular direction.
function initializeAllPanos() {
  panoId = 'RJd2HuqmShMAAAQfCa3ulg'
  setStreetViewPanorama('panoBig', panoId, 0, -90);
  setStreetViewPanorama('pano1', panoId, 0, 0);
  setStreetViewPanorama('pano2', panoId, 180, 0);

 * Sets up the given div as a StreetView Panorama, with the given view angles.
 * @param {string} panoId The panorama id. Eg: 'RJd2HuqmShMAAAQfCa3ulg'.
 * @param {number} headingAngle The degree angle offset from North (clockwise?).
 * @param {number} pitchAngle The degree angle upset up/down.
function setStreetViewPanorama(divId, panoId, headingAngle, pitchAngle) {
  var panoramaOptions = {
    // pano: panoId,  // Wanted to demonstrate 'setPano' instead.
    pov: {
      heading: headingAngle,
      pitch: pitchAngle,
      zoom: 1
  var panorama = new google.maps.StreetViewPanorama(document.getElementById(divId), panoramaOptions);

google.maps.event.addDomListener(window, 'load', initializeAllPanos);
    <div id="panoBig" style="width: 600px; height: 600px;"></div>
    Smaller views:<br>
    <div id="pano1" style="width: 200px; height: 200px; display: inline-block;"></div>
    <div id="pano2" style="width: 200px; height: 200px; display: inline-block;"></div>


Based on code from: !-->

See Also