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