Google Map Js Api "streetviewpanorama" Display 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(

Solution 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

functioninitialize() {

    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 hereif (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%;
}

<divid="street-view"></div><scriptasyncdefersrc="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!