Google Maps API - Street View Panorama Pano Id Viewer

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

About

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>
<html>
  <head>
    <meta charset="utf-8">
    <title>Street View, Render Particular Pano Id</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <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);
  panorama.setPano(panoId);
}

google.maps.event.addDomListener(window, 'load', initializeAllPanos);
    </script>
  </head>
  <body>
    <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>
  </body>

</html>

<!-- ACKNOWLEDGEMENTS:
Based on code from: https://developers.google.com/maps/documentation/javascript/examples/streetview-simple !-->


See Also


Links

Retrieved from "http://andrewnoske.com/w/index.php?title=Google_Maps_API_-_Street_View_Panorama_Pano_Id_Viewer&oldid=370"