Google Maps API - Street View Panorama Animated

From NoskeWiki
Jump to navigation Jump to search
Rotating street view panorama.


About

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


This piece of code loads a Street View Panorama, in this case one in San Francisco outside Urban Putt mini golf, and animates the panorama rotating. Rotation stops if you click it (or uncheck the checkbox)... and there is a delay built in.

The code below uses the StreetViewPanorama object from the Google Maps API.


Rotating a Street View Panorama

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Street View, Animated Rotation</title>
    <script src="https://maps.googleapis.com/maps/api/js?signed_in=false"></script>
    <script>

var ROTATE_DEGS_PER_SEC = 60.0;           // Will take ~12 secs (360/60) for full revolution.
var ROTATE_DELAY_SECS = 2.5;              // Wait 3 seconds to start.
var ROTATE_FPS = 100.0;                   // Frames per second for rotate.
var panoLastTouchTimestamp = Date.now();  // Timestamp pano loaded in milliseconds.
var masterAnimate = true;                 // Set false to stop all animation.
var panoHeadingAngle = 0;                 // Current heading of pano.

/**
 * Sets up our StreetViewPanorama.
 */
function initPano() {
  panoId = 'c5h7pmCVkdehB18NalEThw'  // Urban Putt, SF.
  setStreetViewPanorama('pano', panoId, 90.0, true);
}
 
/**
 * 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 {boolean} animate Whether to animate.
 */
function setStreetViewPanorama(divId, panoId, headingAngle, animate) {
  //panoHeadingAngle = headingAngle;
  var panoramaOptions = {
    pano: panoId,
    pov: {
      heading: headingAngle,
      pitch: 0,
      zoom: 1.2
    },
    addressControlOptions: {  // Show address top middle.
      position: google.maps.ControlPosition.TOP_CENTER
    },
    linksControl: false,  // Don't show 'click to go' arrows to move along road.
    zoomControl: false,   // Hide zoom widget.
    panControl: false,    // Hide rotate widget.
  };
  var panoDiv = document.getElementById(divId);
  var pano = new google.maps.StreetViewPanorama(panoDiv, panoramaOptions);
  panoLastTouchTimestamp = Date.now();

  if (animate) {

    // Add animation which rotates our pano.
    window.setInterval(function() {
      if (masterAnimate == false) {
        return;
      }
      if (Date.now() < panoLastTouchTimestamp + ROTATE_DELAY_SECS * 1000) {
        console.log(Math.floor(Date.now() / 1000));
        return;
      }

      var pov = pano.getPov();
      pov.heading += ROTATE_DEGS_PER_SEC / ROTATE_FPS;
      panoHeadingAngle = pov.heading;
      pano.setPov(pov);
    }, 1000 / ROTATE_FPS);

    // Add a click listener which delays rotation.
    pano.addListener('pov_changed', function() {
      // Check that change in POV is a user click, versus expected animation.
      var pov = pano.getPov();
      if (panoHeadingAngle != pov.heading) {
        panoLastTouchTimestamp = Date.now();  // Will cease animation for a while.
      }
    });
  }
}

/**
 * Turns on/off animation (auto rotate).
 * @param {Element} checkbox A checkbox element.
 */
function handleClick(checkbox) {
  masterAnimate = checkbox.checked;
  panoLastTouchTimestamp = 0;  // So will animate immediately.
}

google.maps.event.addDomListener(window, 'load', initPano);
    </script>

  </head>
  <body>
    <div id="pano" style="width: 600px; height: 400px;"></div>
    <label><input type='checkbox' onclick='handleClick(this);' checked>animate</label>
  </body>
 
</html>


See Also


Links

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