Google Map JS API "StreetViewPanorama" displays black screen for some address
I have added below code for JavaScript Street View.
var geocoder = new google.maps.Geocoder();
var address = "2 Simei Street 3, Singapore, Singapore 529889";
geocoder.geocode({'address': address}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
console.log(latitude + " " + longitude);
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('street-view'), {
position: {lat: latitude, lng: longitude},
});
}
});
For some addresses such as "2 Simei Street 3, Singapore, Singapore 529889", and "1 Hacienda Grove, Singapore 457908" the street view is not displayed and the black screen is on.
for another address such as "105 Simei Street 1, Singapore 520105" the street view is displayed correctly.
I don't understand what the problem is. What can I do to get all the addresses to work properly.
source to share
Analysis
I believe you are facing a problem because lat, lng is far away from roads where street images are available. When I do a geocoding request for "2 Simei Street 3, Singapore, Singapore 529889", I see that Google is returning the coordinate 1.3406241,103.9494707. Let's take a look at this coordinate in the Geocoder tool:
https://google-developers.appspot.com/maps/documentation/utils/geocoder/#q%3D1.340624%252C103.949471
If you drag and drop pagman to check where street images are available you will see this:
So, really, the distance between the address and the road is too great. If I understand correctly, the class StreetViewPanorama
uses the default radius for finding the nearest panorama, and this radius is shorter than the distance from the address to the roads.
Decision
To solve this problem, you can use a class StreetViewService
that allows you to search for panoramas using a query object where you can specify a radius.
https://developers.google.com/maps/documentation/javascript/reference#StreetViewService
You can start your search with a radius of 50 m, if there are no panoms available, you can increase the radius and try again. If nothing is found within a radius of 200 m, you can stop searching and report that access to the streets is not available.
Take a look at the following example.
Proof of concept
function initialize() {
var geocoder = new google.maps.Geocoder();
var address = "2 Simei Street 3, Singapore, Singapore 529889";
geocoder.geocode({'address': address}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
console.log(latitude + " " + longitude);
var svService = new google.maps.StreetViewService();
var panoRequest = {
location: results[0].geometry.location,
preference: google.maps.StreetViewPreference.NEAREST,
radius: 50,
source: google.maps.StreetViewSource.OUTDOOR
};
var findPanorama = function(radius) {
panoRequest.radius = radius;
svService.getPanorama(panoRequest, function(panoData, status){
if (status === google.maps.StreetViewStatus.OK) {
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('street-view'),
{
pano: panoData.location.pano,
});
} else {
//Handle other statuses here
if (radius > 200) {
alert("Street View is not available");
} else {
findPanorama(radius + 5);
}
}
});
};
findPanorama(50);
}
});
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#street-view {
height: 100%;
}
<div id="street-view"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initialize">
</script>
You can also access this example in jsbin:
http://jsbin.com/yoviraw/edit?html,output
Hope this helps!
source to share