Google map Panorama Street View Zoom in & Zoom out buton no Events available

Question

I want to set the pitch pov of streetview panorama when a user presses the zoom in or zoom out buttonns embeeded in streetview panorama but there are no events firing for that while there is when I scroll the mouse middle wheel (scroll).

In the official documentation of Google:

https://developers.google.com/maps/documentation/javascript/examples/streetview-events

there is no way to update the pitch pov using these buttons.

Is there any workaround in order to achieve that?

Answer 1

The zoom_changed event works for me:

panorama.addListener('zoom_changed', function() {
  console.log(panorama.getZoom());
});

proof of concept fiddle

code snippet:

function initPano() {
  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('pano'), {
      position: {
        lat: 37.869,
        lng: -122.255
      },
      pov: {
        heading: 270,
        pitch: 0
      },
      visible: true
    });

  panorama.addListener('pano_changed', function() {
    var panoCell = document.getElementById('pano-cell');
    panoCell.innerHTML = panorama.getPano();
  });

  panorama.addListener('zoom_changed', function() {
    var zoomCell = document.getElementById('zoom-cell');
    zoomCell.innerHTML = panorama.getZoom();
    console.log(panorama.getZoom());
  });

  panorama.addListener('links_changed', function() {
    var linksTable = document.getElementById('links_table');
    while (linksTable.hasChildNodes()) {
      linksTable.removeChild(linksTable.lastChild);
    }
    var links = panorama.getLinks();
    for (var i in links) {
      var row = document.createElement('tr');
      linksTable.appendChild(row);
      var labelCell = document.createElement('td');
      labelCell.innerHTML = '<b>Link: ' + i + '</b>';
      var valueCell = document.createElement('td');
      valueCell.innerHTML = links[i].description;
      linksTable.appendChild(labelCell);
      linksTable.appendChild(valueCell);
    }
  });

  panorama.addListener('position_changed', function() {
    var positionCell = document.getElementById('position-cell');
    positionCell.firstChild.nodeValue = panorama.getPosition() + '';
  });

  panorama.addListener('pov_changed', function() {
    var headingCell = document.getElementById('heading-cell');
    var pitchCell = document.getElementById('pitch-cell');
    headingCell.firstChild.nodeValue = panorama.getPov().heading + '';
    pitchCell.firstChild.nodeValue = panorama.getPov().pitch + '';
  });
}

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#pano {
  width: 50%;
  height: 100%;
  float: left;
}

#floating-panel {
  width: 45%;
  height: 100%;
  float: right;
  text-align: left;
  overflow: auto;
  position: static;
  border: 0px solid #999;
}

<div id="pano"></div>
<div id="floating-panel">
  <table>
    <tr>
      <td><b>Position</b></td>
      <td id="position-cell">&nbsp;</td>
    </tr>
    <tr>
      <td><b>Zoom</b></td>
      <td id="zoom-cell">&nbsp;</td>
    </tr>
    <tr>
      <td><b>POV Heading</b></td>
      <td id="heading-cell">270</td>
    </tr>
    <tr>
      <td><b>POV Pitch</b></td>
      <td id="pitch-cell">0.0</td>
    </tr>
    <tr>
      <td><b>Pano ID</b></td>
      <td id="pano-cell">&nbsp;</td>
    </tr>
    <table id="links_table"></table>
  </table>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initPano&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>