Google map JS API "StreetViewPanorama" display black screen for some address

Question

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 address like "2 Simei Street 3, Singapore, Singapore 529889", and "1 Hacienda Grove, Singapore 457908" street view is not displayed and black screen is coming.

for other address like "105 Simei Street 1, Singapore 520105 " street view is displayed properly.

I don't understand what is issue .What can i do so that all address comes properly.

Answer 1

Analysis

I believe you are experiencing the issue because the lat,lng is far away from the roads where the street view imagery is available. When I execute geocoding request for '2 Simei Street 3, Singapore, Singapore 529889' I can see that Google returns coordinate 1.3406241,103.9494707. Let's have 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 the pagman to check where the street view imagery is available you will see the following:

So, indeed the distance between an address and roads is too big. If I understand correctly the StreetViewPanorama class uses a default value for radius to search nearest panorama and this radius is shorter than the distance from address to roads.

Solution

To solve this problem you can use the StreetViewService class that allows to search panos using a request object where you can specify a radius.

https://developers.google.com/maps/documentation/javascript/reference#StreetViewService

You can start searching with radius 50m, if no panos available you can increase the radius and try again. If nothing is found in a radius 200m you can stop searching and report that no street view is available.

Have 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 at jsbin:

http://jsbin.com/yoviraw/edit?html,output

I hope this helps!