Google AJAX API loader - A Million Thoughts

Today I was going to the Google Maps API documentation and after using it for a while, my eye was caught by this:

It’s maybe a bit difficult to read from the above image, but it says:

The Google Maps API is now integrated with the Google AJAX API loader…

I couldn’t remember seeing this before, so besides clicking on the link, I googled “Google AJAX API loader”. I found out it’s a very new way of using multiple Google javascript APIs on the same page.

The main purpose for the loader is to unify namespaces across the different APIs on one page and to have only one script tag instead of separate script tags for each of the APIs you wanna use on your page.

At this moment there are 3 Google AJAX APIs:

Before the API loader you had to write a seperate <script> tag for each of these APIs you were going to use on your page, like this:


<--Loading the Maps API -->
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
       type="text/javascript">
</script>
<--Loading the Search API -->
<script src="src="http://www.google.com/uds/api?file=uds.js&v=1.0"
       type="text/javascript"">
</script>
<--Loading the Feed API -->
<script src="http://www.google.com/jsapi?key=YOUR_KEY_HERE"
       type="text/javascript">
</script>


With the new loader in place it looks a lot more cleaner:


<--Use the Loader -->
<script src="http://www.google.com/jsapi?key=ABCDEFG"
       type="text/javascript">
</script>
<--Load the APIs -->
<script type="text/javascript">
  google.load("maps", "2");
  google.load("search", "1");
  google.load("feeds", "1");
</script>



The second parameter of the 'load' call is the version you'd like to use of this API. So the above example loads version 2 of the Maps API, version 1 of the AJAX Search API and also version 1 of the AJAX Feeds API.
Apparently the AJAX Feed API was already using this way to load the API and now you can use it for all 3 of the Google's AJAX APIs. 
Example
Here's a complete example from the documentation:


<html>
  <head>
    <script src="http://www.google.com/jsapi?key=ABCDEFG"
type="text/javascript"></script>
  <script type="text/javascript">
      google.load("maps", "2");
      google.load("search", "1");

      // Call this function when the page has been loaded
      function initialize() {
        var map = new google.maps.Map2(document.getElementById("map"));
        map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);

        var searchControl = new google.search.SearchControl();
        searchControl.addSearcher(new google.search.WebSearch());
        searchControl.addSearcher(new google.search.NewsSearch());
        searchControl.draw(document.getElementById("searchcontrol"));
      }
      google.setOnLoadCallback(initialize);
    </script>

  </head>
  <body>
    <div id="map" style="width: 200px; height: 200px"></div>
    <div id="searchcontrol"></div>
  </body>
</html>



Here you can see, it's not only about loading the APIs, but you can also initialize them in one method and use the google.setOnLoadCallback method to call the init method once the document loads.
Namespace and migrating
Google now uses a different namespace for each of the APIs. Instead of the G* naming scheme, you can now use the new scheme "google.*". For the Maps API this will be "google.maps.*". 
Both naming schemes will coexists, so you can make your own choice if you're going to use the new one. I think for new projects it would be wise to start using the new scheme, especially if you're using more than 1 API on a page. 
Google says they will continue to update and maintain both schemes, so at this moment there's no need to migrate your older code.