Search code examples
javascriptgoogle-maps-api-3

Why someStreetViewPanorama.getStatus() returns undefined (Google maps API, JS)

Im trying to make StreetViewPanorama with some position, then check: if it has panorama return true else return false (it might be not StreetViewPanorama if need, i just have to save coordinates of checked position)

The problem is using console.log() checking what .getStatus() returns i get undefined without any exceptions or so. I saw many cases programmers getting this problem with other classes but it didnt help

My code was stolen from Google code example:

index.html

<html>
  <head>
    <title>Street View split-map-panes</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="C:/Users/pasha/Desktop/geog/style.css"/>
    <script src="C:/Users/pasha/Desktop/geog/index.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <div id="pano"></div>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initialize&v=weekly"
      defer
    ></script>
  </body>
</html>

index.js

function initialize() {
  const fenway = { lat: 42.345573, lng: -71.098326 };
  const map = new google.maps.Map(document.getElementById("map"), {
    center: fenway,
    zoom: 14,
  });
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano"),
    {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10,
      },
    },
  );

  console.log(panorama.getStatus()); // undefined 

  map.setStreetView(panorama);
}

window.initialize = initialize;

.getStatus() actually has to return StreetViewStatus.OK | StreetViewStatus.UNKNOWN_ERROR | StreetViewStatus.ZERO_RESULTS. Also i tryed .getStatus().code and even .getStatus().getCode() but got Errors. Anyone know whats wrong?

Solution

  • The Google Maps Javascript API is event driven and asynchronous. Don't attempt to access the status property until it has been initialized.

    Listen for the status_changed event before calling getStatus.

    (see Events in the documentation)

    google.maps.event.addListener(panorama, 'status_changed', function() {
  console.log(panorama.getStatus()); 
})

    proof of concept fiddle

    screen shot of result

    code snippet:

    function initialize() {
  const fenway = { lat: 42.345573, lng: -71.098326 };
  const map = new google.maps.Map(document.getElementById("map"), {
    center: fenway,
    zoom: 14,
  });
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano"),
    {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10,
      },
    },
  );
  google.maps.event.addListener(panorama, 'status_changed', function() {
    console.log(panorama.getStatus()); 
    document.getElementById("info").innerHTML = "panorama.getStatus() returns:"+ panorama.getStatus();
  })
  map.setStreetView(panorama);
}

window.initialize = initialize;
    html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map,
#pano {
  float: left;
  height: 90%;
  width: 50%;
}
    <!doctype html>
<html>
  <head>
    <title>Street View split-map-panes</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="info"></div>
    <div id="map"></div>
    <div id="pano"></div>

    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&v=weekly"
      defer
    ></script>
  </body>
</html>