I have been attempting to showcase the interior of various businesses using the Google Maps API street view feature. Initially, I was able to retrieve the place_id and then use it to access any available street view panoramas. However, this functionality suddenly stopped working earlier this week and I'm struggling to pinpoint the cause. The interactive map section now displays as grey with only a few Google artifacts visible, and an error indicating that the generated Google URL returned a 404 status is logged in the console. Has anyone else encountered this issue?
You can also find the code below on my JS Fiddle account.
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();
});
}
}