Google Maps API - Street View Panorama Popup Window

From NoskeWiki
Jump to navigation Jump to search
A popup showing a panorama".

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 "VICAHSi6-LEAAAQYLE57aA" - a nice view of Angel Falls - in a popup window.

It uses the StreetViewPanorama object from the Google Maps API. It blankets the background in semi-transparent black, which covers the whole window, so the popup is more obvious. Most of this is done with CSS - the changing of panos is (of course) JavaScript though.



Street View Panorama Popup Window

<!doctype html>
 
<html lang="en">
<head>
  <meta charset="utf-8">
 
  <title>Panorama Popup</title>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
  <style>
/* CSS for popup window div elements. */
#popup-window {
  position:fixed;
  padding:0;
  margin:0;

  top:0;
  left:0;

  width: 100%;
  height: 100%;
}

#blanket {
  position:fixed;
  padding:0;
  margin:0;

  top:0;
  left:0;

  width: 100%;
  height: 100%;
  background:rgba(50,50,50,0.5);
}

#popup-area {
  background-color:#000;

  top: 50%;
  left: 50%;
  transform: translate(10%,10%);

  width:80%;
  height:650px;
}

#pano {
  width:98%;
  height:600px;
  display: inline-block;

  top: 35px;
  left: 1%;
}

#close-button {
  position: fixed;
  width:25px;
  height:25px;
  display: inline-block;
  top: 0px;
  right: 0px;
}
  </style>

</head>

<body>

  <!-- Popup window div (starts hidden) starts here. -->
  <div id="popup-window" style="display:none;">
    <div id="blanket" onclick="hidePopup()"></div>
    <div id="popup-area">
      <button id="close-button" type="button" onclick="hidePopup()" title="Close popup">x</button>
      <div id="pano"></div>
    </div>
  </div>
  <!-- Popup window div ends here. -->

  <script>
  var panorama;

  /**
   * Sets up the `pano` div as a StreetView Panorama, with the given pano and angle.
   * @param {string} panoId The panorama id. Eg: 'RJd2HuqmShMAAAQfCa3ulg'.
   * @param {number} yaw The offset angle (in degrees) from North (clockwise?).
   * @param {number} pitch The offset angle (in degrees) up/down.
   */
  function showPopupWithPano(panoId, yaw, pitch) {
    if (!panorama) {
      var panoramaOptions = {
        pov: {
          heading: 0,
          pitch: 0,
          zoom: 1
        }
      };
      panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
    }
    panorama.setPano(panoId);
    panorama.setPov({
        heading: yaw,
        pitch: pitch,
        zoom: 1
      });
    showPopup();
  }
  /**
   * Shows the hidden "popup window".
   */
  function showPopup() {
    var popupWindow = document.getElementById('popup-window');
    popupWindow.style.display = 'block';
  }
  /**
   * Hides the "popup window".
   */
  function hidePopup() {
    var popupWindow = document.getElementById('popup-window');
    popupWindow.style.display = 'none';
  }
  </script>

  <button type="button" onclick="showPopupWithPano('VICAHSi6-LEAAAQYLE57aA', 30, 0)">Show popup 1</button>
  <button type="button" onclick="showPopupWithPano('45ix6ma2WsQAAAQfCa3umA', 30, 0)">Show popup 2</button>

</body>
</html>


See Also


Links

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