Use blur.js on a Google map (v3 API)

Question

Currently what I am attempting to do, is to use blur.js on a div named map_canvas which contains a google map. I've already tried to create a div over it and simply use:

$(document).ready(function() {

    $('#blurredCoverDiv').blurjs({
        source: '#map_canvas',
        radius: 30,
        overlay: 'rgba(0, 0, 0, .2)'
    });

});

However, that is resulting in an error in the console:

GET http://[site]/none 404 (Not Found) blur.js:279

I've seen one stackoverflow question involving this very question, however, the solution there didn't seem to solve my problem.

Any ideas as to why this may be happening, or a way to fix it?

Answer 1

You get 404 error because blur.js is looking for a background-image in the source's div. Since your map_canvas is set to none, blur.js will push a 404 error to the console ('none' is not found).

I haven't tested it, but the solution comes to my mind right now is to set a google map static image as your map_canvas's background-image. If that works, you can go on and write a function which takes the current view on the map_canvas's canvas and apply it as a static image to its background-image. Let me know if it's working.