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.

Request URL: http://maps.googleapis.com/maps/api/streetview?parameters

+The Problem+

If I give it an address for which it doesn't have a Streetview, it returns an image that says, "Sorry, we have no imagery here".

Based on the current API, I have no way of detecting if it found a Streetview or not. Anyone have a hack or suggestion for figuring this out?

+Examples+

Proper Streetview: http://maps.googleapis.com/maps/api/streetview?size=300x300&sensor=false&location=100+Highland+Ave+Baltimore,+MD+21224

Sorry Streetview: http://maps.googleapis.com/maps/api/streetview?size=300x300&sensor=false&location=1600+Pennsylvania+Ave,+Washington,+DC+20500

Upsetting

Answer 1

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 )

Elainaelaine

This works partially, but be aware that the JavaScript API may return panos (pano ID near a latlng) that are not available in the Street View Image API. See code.google.com/p/gmaps-api-issues/issues/detail?id=10402 for the full details. – Regimen

It's weird way because as far as i understand it requires google.maps script addition. What if i need only image on my website, and it already has quite many scripts. – Gitagitel

Answer 2

Simply query the Street View Image Metadata API.

This is a new feature, added to the Street View Image API in November 2016, that will let you query for the availability of Street View panoramas at given locations (address or latlng), or even pano IDs. These queries are free of charge.

Regimen

Answer 3

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.

Flanigan

Answer 4

This works for me:

$(function() {
    $('img[src*="maps.googleapis.com"]').each(
        function(){
             $(this).hide();  // you may want to replace this with a css rule
             var img=($(this).attr('src'));
             var xhr = new XMLHttpRequest();
             xhr.img=$(this);
             xhr.open("GET", img, true);
             xhr.responseType = "arraybuffer";
             xhr.onreadystatechange = function() {
                 if(this.readyState == this.DONE) {
                     if (this.response.byteLength!=8381) this.img.fadeIn();
                     // Here is a good place to measure the byteLength of 
                     // grey images in your requested size  
                 }
             };
             xhr.send(null);
        });
});        

You can add a css rule:

img[src*="maps.googleapis.com"] {display:none;}

Instead of the line:

$(this).hide();

Which is smoother.

Note that the response content length of a grey image may vary depending on the dimensions you specify in your request, so be sure to test and replace this.response.byteLength!=8381 with whatever you're getting for your specific size. 8381 is the correct value for 600 x 600 images.

Additionally, google may change the non present image or the location of the text on it, so careful testing is needed.

A method to consider is to check if the response.byteLength is above a given threshold, the grey images, being great targets for compression, are typically much smaller than the real images.

Rosalindarosalinde

Answer 5

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]);
            }
        });

}

Acetaldehyde

Answer 6

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);
?>

Wira

Answer 7

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");
            }
    });

Strachan

Answer 8

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.

Timtima