List of Panorama Id (StreetView)

Question

I need to keep a list of Panorama Id in a direction. I can get that with Links with a Method of StreetViewPanorama. But I have this error:

variablele "Links" is undefined

My code is:

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

What am I doing wrong? I hope with the Links get the next panorama:

Links[0].getPano();

Answer 1

The Google Maps Javascript API v3 is event based. You need to wait for the panorama's "status_changed" event to fire before getLinks() will return results.

google.maps.event.addListener(panorama, 'status_changed', function() {
  var status = panorama.getStatus();
  if (status == "OK") {
    var Links = panorama.getLinks();
    console.log(Links);
  } else {
    alert("panorama status="+panorama.getStatus());
  }
});

proof of concept fiddle

code snippet:

var panorama;

function initialize() {
  panorama = new google.maps.StreetViewPanorama(
    document.getElementById('street-view'), {
      position: {
        lat: 37.869260,
        lng: -122.254811
      },
      pov: {
        heading: 165,
        pitch: 0
      },
      zoom: 1
    });
  var Links = panorama.getLinks();
  console.log(Links);
  google.maps.event.addListener(panorama, 'status_changed', function() {
    var status = panorama.getStatus();
    if (status == "OK") {
      var htmlStr = "<b>Links:</b><br>";
      var Links = panorama.getLinks();
      console.log(Links);
      for (var i = 0; i < Links.length; i++) {
        htmlStr += Links[i].heading.toFixed(3) + ":" + Links[i].description + "<br>";
      }
      document.getElementById('links').innerHTML = htmlStr;
    } else {
      alert("panorama status="+panorama.getStatus());
    }
  });
}

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

#street-view {
  height: 100%;
}

<!-- 
modified from:
https://developers.google.com/maps/documentation/javascript/examples/streetview-embed
-->
<div id="links"></div>
<div id="street-view"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initialize"></script>