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

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.

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

18 thoughts on “How to dynamically load the Google Maps javascript API (On demand loading)

  1. Pingback: Tweets that mention How to dynamically load the Google Maps javascript API (On demand loading) | vijayjoshi.org -- Topsy.com

  2. Christopher

    Thanks you very much. I was stumbling about this issue for how many hours already. This solution is pretty nice.

    Reply
  3. Robert Simon

    Thanks so much, very useful!!!!

    How can I unload the map (along with API to free up resources) via button click?

    Reply
  4. Encontrar Pareja

    I am sure this post has touched all the internet
    viewers, its really really nice article on building up new website.

    Reply
  5. sreejith

    sir it works nicely but how to add pointer and multiple map options such as sattelite hybrid etc

    Reply
  6. pranay joshi

    i want to match a default location to other one by one ,to get distance and duration via google map api,its working but after end of the loop it cant break and display nothing, i have to see the results by alert() help me out here is my code…

    Reply

Leave a Reply