How can I tell if Google's Streetview Image API Returns “Sorry, we have no imagery here” (ie. NULL) Result?

Question

The Google Street View Image API lets you embed a static (non-interactive) Street View panorama or thumbnail into your web page, without the use of JavaScript.

Reque

Answer 1

Similar to MALK:

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.

Answer 2

Consider using StreetViewService and StreetViewStatus objects in Google Maps: https://developers.google.com/maps/documentation/javascript/streetview#StreetViewService

Essentially what you'll have to do is create a StreetViewService object that will try to find a panorama based on location, using the getPanoramaByLocation(latlng:LatLng, radius:number, callback:function(StreetViewPanoramaData, StreetViewStatus)) method.

In the callback function, have a conditional argument that will check for the data availability if (status == google.maps.StreetViewStatus.OK). Based on the boolean return, execute the desired actions. The first link I provided got a great example of the use of these methods.

Note: I also notice you've got locations based on addresses. This can be simply converted to LatLng using the Geocoding Service ( https://developers.google.com/maps/documentation/javascript/geocoding )

Answer 3

I wrote a small hack for this problem. Basically it uses this plugin to get the BASE64 of the image, draws it to canvas (with visibility set to 'hidden') and checks the color of the image returned by Google.

 function checkImage(url){

        var error_image_color = {
            0: 228,
            1: 227,
            2: 223,
            3: 255
        }

        $.getImageData({
            url: url,
            success: function(image){
                var append_img = $(image);
                var img_base64 = $(image).attr('src');
                var image = new Image();
                image.src = img_base64;
                var canvas = document.getElementById('canvas').getContext('2d');
                canvas.drawImage(image, 0, 0);
                var data = canvas.getImageData(10, 10, 1, 1).data;

                if (data[0] != error_image_color[0]){
                    $('body').append(append_img);                       
                }
            },
            error: function(a,b,c){
                console.log([a,b,c]);
            }
        });

}

Answer 4

Another option it to check the size of the response. The "No Image" grey image byte size depends on the requested width and height. However, it is much smaller than the existing image. For example with angularJS:

$http.get("https://maps.googleapis.com/maps/api/streetview?size=600x300&location=46.404382,10.013988")
    .success(function(response) { 
        if(response.length < 5000) {
            console.log("This is a no-image image");
            }
    });

Answer 5

Well, you easily can check the size of the returned file

I write my solution with PHP as an example. this function has two inputs : google streat view API URL and size of "Blank Image".

<?
function street_view_check($url,$size_of_blank_image){
    $str=file_get_contents($url);
   if(strlen($str)==$size_of_blank_image){
            return false;
   }
   return true;
}

 $url1="http://maps.googleapis.com/maps/api/streetview?size=640x480&location=40.648215,-8.624296&fov=90&heading=$i&pitch=0&sensor=false";
 $url2="http://maps.googleapis.com/maps/api/streetview?size=640x480&location=41.157207,-8.62378&fov=90&heading=$i&pitch=0&sensor=false";

 echo street_view_check($url1,6778);
 echo street_view_check($url2,6778);
?>

Answer 6

It seems like google uses a json endpoint behind the scenes. I think this is what you are looking for http://andresmartinezsoto.wordpress.com/category/computing/google-maps-api/

It returns empty object ({}) when there is no image available.

Previously, I used a HEAD request to get the content-length and compared that to know if a image exists or not.