Google Maps library loading blocks the page

Question

I use the following HTML tag to load the Google Maps API :

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

However, it is blocking the loading everything that's below it in the HTML until the script is loaded by the browser.

Is there a way to make this loading non-blocking?

Answer 1

This code gives you a defer function that takes an url and an optional callback. It asynchronously loads your script without blocking page rendering. I've put in a protection so it won't load the same scritp twice, so you can naively call it as many times as you like.

defer = (function () {
    var urls = [];

    return function (url, callback) {
        var inc;

        if (url && urls.indexOf(url) === -1) {
            inc = document.createElement('script');
            inc.async = true;
            inc.src = url;
            inc.onload = callback || function () {};
            document.getElementsByTagName('head')[0].appendChild(inc);
        }
    }
}());

defer('http://maps.google.com/maps/api/js?sensor=false');

This works for any external javascript that doesn't fail on async loading.

Answer 2

Yes, you can load it asynchronously. Check out this part of the docs: http://code.google.com/apis/maps/documentation/javascript/basics.html#Async