Google Maps API Street view displaying grey

Question

I am trying to display the interior of businesses through the google maps api street view. I am first retrieving the places_id and using that to retrieve any street view panorama's that might be available. This was working earlier in the week and has stopped. I cannot figure out why, though. The div to show the interactive map displays grey with a few of the google artifacts and an error is logged to the console that the google generated url returned a 404. Has anyone encountered this?

The code below is also in my JS Fiddle

var map;
var panorama;

$('#thebutton').click(function () {

    map = new google.maps.Map(document.getElementById('map-canvas'));
    var infowindow = new google.maps.InfoWindow();
    var place_id = 'ChIJ-_RcvsBV2YARhkUbjSD3Vi4';
    var placeservice = new google.maps.places.PlacesService(map);
    var placesRequest = {
        placeId: place_id
    };

    placeservice.getDetails(placesRequest, function (results, status) {

        if (status == google.maps.places.PlacesServiceStatus.OK) {
            var marker = new google.maps.Marker({
                map: map,
                position: results.geometry.location
            });
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent(results.name);
                infowindow.open(map, this);
            });
            var brewerystreetview = new google.maps.LatLng(results.geometry.location.A, results.geometry.location.F);

            var sv = new google.maps.StreetViewService();
            panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), {
                center: new google.maps.LatLng(results.geometry.location.lat(), results.geometry.location.lng()),
                zoom: 0
            });
            sv.getPanorama({
                location: brewerystreetview,
                radius: 0
            }, processSVData);
        }
    });
});

function processSVData(data, status) {

    if (status == google.maps.StreetViewStatus.OK) {
        var marker = new google.maps.Marker({
            position: data.location.latLng,
            map: map,
            title: data.location.description
        });

        panorama.setPano(data.location.pano);
        panorama.setPov({
            heading: 0,
            pitch: 0
        });
        panorama.setVisible(true);

        google.maps.event.addListener(marker, 'click', function () {

            var markerPanoID = data.location.pano;
            // Set the Pano to use the passed panoID.
            panorama.setPano(markerPanoID);
            panorama.setPov({
                heading: 0,
                pitch: 0
            });
            panorama.setVisible(true);
            panorama.show();
        });
    }
}

Answer 1

1. FYI, the .getPanorama function is new in v3.21 (v.exp), before that (v3.20 and earlier) it was .getPanoramaById and .getPanoramaByLocation. I suspect that the API changed underneath you (the experimental version, which you are served by default changed from v3.20 to v3.21)

2. You should never use undocumented properties of the Google Maps Javascript API (results.geometry.location.A, results.geometry.location.F), those can and do change with every release of the API. In most places you are using these, you can just used the returned google.maps.LatLng rather than creating a new one.

3. a StreetViewPanorama doesn't have a center option, should be position:

panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), {
    center: results.geometry.location,
    zoom: 0
});     

should be:

panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), {
    position: results.geometry.location,
    zoom: 0
});

updated fiddle

code snippet:

var map;
var panorama;

$('#thebutton').click(function() {
  map = new google.maps.Map(document.getElementById('map-canvas'));
  var infowindow = new google.maps.InfoWindow();
  var place_id = 'ChIJ-_RcvsBV2YARhkUbjSD3Vi4';
  var placeservice = new google.maps.places.PlacesService(map);
  var placesRequest = {
    placeId: place_id
  };
  placeservice.getDetails(placesRequest, function(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      var marker = new google.maps.Marker({
        map: map,
        position: results.geometry.location
      });
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(results.name);
        infowindow.open(map, this);
      });
      var brewerystreetview = results.geometry.location;

      var sv = new google.maps.StreetViewService();
      panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), {
        position: results.geometry.location,
        zoom: 0
      });
      sv.getPanorama({
        location: brewerystreetview,
        radius: 0
      }, processSVData);
    }
  });
});

function processSVData(data, status) {
  if (status == google.maps.StreetViewStatus.OK) {
    var marker = new google.maps.Marker({
      position: data.location.latLng,
      map: map,
      title: data.location.description
    });

    panorama.setPano(data.location.pano);
    panorama.setPov({
      heading: 0,
      pitch: 0
    });
    panorama.setVisible(true);

    google.maps.event.addListener(marker, 'click', function() {

      var markerPanoID = data.location.pano;
      // Set the Pano to use the passed panoID.
      panorama.setPano(markerPanoID);
      panorama.setPov({
        heading: 0,
        pitch: 0
      });
      panorama.setVisible(true);
      panorama.show();
    });
  }
}

 div#pano {
   width: 100%;
   height: 400px;
   float: left;
 }
 div#map-canvas {
   width: 100%;
   height: 25%;
   float: left;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div class="container" id="infocontainer" style=""><a href="#" class="btn btn-primary" id="thebutton" onclick="return false;">Click here</a>
</div>
<div id="pano"></div>
<div id="map-canvas"></div>