How to check if Google Street View Image API returns no image? [duplicate]

Question

I am using Google Street View image API to show an image of a location.

It works fine, however when no picture is available i get a black image instead of a location picture. Is there any way I can check if no image is returned and show another image instead?

Ferricyanide

Not sure why there's a vote to close as this seems to me to be a perfectly sensible question - albeit one that looks at first glimpse to not have a simple answer. – Guesstimate

Answer 1

I don't think there is a way to check this. The SV image API is designed for static cases when you can't add much functionality to the page.

Maybe you should look at Street View in the JS API, which will let you detect when imagery is available.

Artis

Answer 2

Another way is to load the image and then compare some pixels colors. The "no streetview" image from google is always the same. Here is how you would compare 2 pixels:

var url = STREETVIEWURL
var img = new Image();
// Add some info to prevent cross origin tainting
img.src = url + '?' + new Date().getTime();
img.setAttribute('crossOrigin', '');
img.crossOrigin = "Anonymous";
img.onload = function() {
    var context = document.createElement('CANVAS').getContext('2d');
    context.drawImage(img, 0, 0);
    //load 2 pixels.  I chose the first one and the 5th row
    var data1 = context.getImageData(0, 0, 1, 1).data;
    var data2 = context.getImageData(0, 5, 1, 1).data;
    console.log(data1);
    // google unknown image is this pixel color [228,227,223,255]
    if(data1[0]==228 && data1[1]==227 && data1[2]==223 && data1[3]==255 && 
                     data2[0]==228 && data2[1]==227 && data2[2]==223 && data2[3]==255){
        console.log("NO StreetView Available");
    }else{
         console.log("StreetView is Available");
    }
};

Some potential issues: I've seen some errors with CrossOrigin tainting. Also, if google changes the image returned this code will break.

Bertrambertrand

Answer 3

//Image Div  

<div id='pano'>    

    streetview.getPanoramaByLocation(streetViewLocation, 50, function(data, status) {
                    if (status == 'OK') {
                      var fenway = {lat: Number(alarm_lat), lng: Number(alarm_lng)};
                      var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), {
                        position: fenway,
                        pov: {
                          heading: 34,
                          pitch: 10
                        }
                      });    
                      map.setStreetView(panorama);
                    }
                    else{
                      //another image here

                    }
                });

Smallish