Question

I’m trying to make a page which includes a static Google map. When the page is resized I dynamically change the map. I have the following code in a function which is fired on page resize and periodically after a check that the sizes of elements on the page match :

if (imageDownloadEnabled) {
   url = 'http://maps.googleapis.com/maps/api/staticmap?center=' + userLat + ',' + userLng + '&zoom=14&size=' + ((theWidth/2)|0) + 'x'+ ((theHeight/2)|0) + '&sensor=false&scale=2';
   newImage = $('<img />');
   console.log('Retrieving map from ' + url);

   newImage.error( function() { 
      console.log("error loading image");
      imageDownloadEnabled = false;
   }).load(function(eventObject) {
      console.log("done loading image");
      console.dir(eventObject);
      $('#maps-image').replaceWith(newImage);
      newImage.attr('id', 'maps-image');
   }).attr('src', url);
/**/
} else {
   console.log('disabled');
}

When the google maps api overloads (happening at the moment because a bug of mine caused an infinite loop) I get a 403 error and a substitute image. The error event handler is not called though.

Is there any way around this? I’d like to make sure that in the event of a 403, the page stops requesting new images from Google.

Answer 1

This is what I came up with in the end, after looking around.

The problem is that Google is returning an image along with the 403 status, so the onload event is fired. So my code would load the 10px by 10px error image, regardless of the size of the div it sat in.

The trick was to use an in-memory Image(), load the url and check the size of the image in the onload event. If the image is too small, load the standin.

The code :

if (imageDownloadEnabled) {
    url = 'http://maps.googleapis.com/maps/api/staticmap?center=' + userLat + ',' + userLng + '&zoom=14&size=' + ((rightWidth/2)|0) + 'x'+ ((rightHeight/2)|0) + '&sensor=false&scale=2';
    oldMap = $('#maps-image');
    var img = new Image();
    img.onload = function() {
        if(this.width < 100 || this.height <100) {
            console.log('Google 403, loading standin');
            /*  disable image download */
            imageDownloadEnabled = false;
            oldMap.attr('src', standinUrl);
        } else {
            oldMap.attr('src', url);
        }
    }
    img.onerror = function() {
        console.log('Error, loading standin');
        oldMap.attr('src', standinUrl);
    }
    img.src = url;
} else {
    oldMap.attr('src', standinUrl);
}

In case it is not clear, below a certain browser size I get rid of the map, which is why I simply check for image size in the onload function.