How Can I Tell If Google's Streetview Image Api Returns "sorry, We Have No Imagery Here" (ie. Null) Result?

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://

Solution 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 )

Solution 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.

Solution 3:

This works for me:

$(function() {
    $('img[src*="maps.googleapis.com"]').each(
        function(){
             $(this).hide();  // you may want to replace this with a css rulevar img=($(this).attr('src'));
             var xhr = newXMLHttpRequest();
             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.

Solution 4:

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.

Solution 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.

functioncheckImage(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 = newImage();
                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]);
            }
        });

}