Google maps StreetViewPanorama display error - google-maps

Question

I'm trying to make a street panorama of a given location on a map. Sometimes the panorama works fine with the location as the position of the panorama, and other times it shows only a gray screen with controls. To solve this, I am trying to use the StreetViewService.getPanoramaByLocation(). The returned LatLng from this function is VERY close to the LatLng's of the locations of panoramas that already work, but the panorama is ALWAYS gray when I use this input as position. I've done lots of research and still cannot solve the problem.
Here is my code:
function init() {
var location = new google.maps.LatLng(<%=id%>);
map = new google.maps.Map(document.getElementById("map_canvas"), {
center: location,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
marker = new google.maps.Marker({
map: map,
position: location
});
var client = new google.maps.StreetViewService();
client.getPanoramaByLocation(location, 49, function(result, status) {
if (status == "OK" )
location = result.location.latLng;
});
myPano = new google.maps.StreetViewPanorama(document.getElementById("pano"), {
position: location,
pov: {
pitch: -10,
heading: 0,
zoom: 1
}
});
}
Any help would be greatly appreciated! Thanks!

Answer 1

I do this slightly differently from you. I only create the StreetViewPanorama if the status is 'ok'
var sv = new google.maps.StreetViewService();
sv.getPanoramaByLocation(streetViewLocation, 50, function(data, status) {
if (status == 'OK') {
//google has a streetview image for this location, so attach it to the streetview div
var panoramaOptions = {
pano: data.location.pano,
addressControl: false,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById(strMapCanvasID), panoramaOptions);
}
else{
//no google streetview image for this location, so hide the streetview div
$('#' + strMapCanvasID).parent().hide();
}
});