How to dynamically load the Google Maps javascript API (On demand loading)

Posted By Vijay Joshi January 19, 2010
4 comments

Normally google maps js api is loaded at the time of page load via a script tag with src set. If map is not so major feature of your application or you want to reduce page download time, you can defer loading the javascript load it when required.
This is a javascript pattern called On demand javascript.

Bottomline is: “JavaScript being pulled from the server after the page has loaded“.

Google maps provide the facility to dynamically load the api when required.  So no need to load it at the time of page load. I will present an example here which will load the maps api on click of a button. Here is how to do it.

View Demo

As said above, DO NOT load any javascript api from Google using script tags. Instead we will use a button.

<input id="loadButton" onclick="loadAPI()" type="button" value="Load maps api" />

To load the api onclick of this button, create a script tag, set its src and append it to document. This will load the Google AJAX API required to load other google APIs.

function loadAPI()
{
    var script = document.createElement("script");
    script.src = "http://www.google.com/jsapi?key=YOUR_API_KEY_HERE&amp;callback=loadMaps";
    script.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(script);
}

Do not forget to replace the API key above with your API key. (You can get an API key by signing up here)

Important: Note the callback=loadMaps in script.src. This is the thing doing all the magic. It tells which function to call when AJAX API has loaded. In above case it will call loadMaps function. So, let us define that.

function loadMaps()
{
    //AJAX API is loaded successfully. Now lets load the maps api
    google.load("maps", "2", {"callback" : mapLoaded});
}

loadMaps function uses load method of google AJAX API to load a specific api. Above we loaded “maps” version “2″. Again callback is the name of function that will be called when maps api is loaded. callback function will be called only when the maps api is loaded successfully.

function mapLoaded()
{
    //here you can be sure that maps api has loaded
    //and you can now proceed to render the map on page
    if (GBrowserIsCompatible())
    {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setMapType(G_SATELLITE_MAP);
        map.setCenter(new GLatLng(28.631466106808542, 77.07853317260742), 5);
    }
}

That is all to it. I have created a demo along these lines. View source for code. You can see it here.

Related Posts

Technology, javascript

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

4 Responses to “How to dynamically load the Google Maps javascript API (On demand loading)”

Leave Comment

(required)

(required)


9,565 spam comments
blocked by
Akismet