Load Google Maps Dynamically

Previously, I posted how to load google maps script dynamically for performance reasons. However, when callback function is get called, we could not pass any parameters to this callback, because the callback we passed is the name specified in string.

There is another way if you use multiple APIs from Google, Google AJAX APIs. This framework allows you to load one API key for all supported Google AJAX APIs (including Google Maps) and also provides a common namespace for each API, allowing different Google APIs to operate together. If you decide not to use the Google AJAX API framework, you can continue to use the existing namespace. There is a method from this framework called load() with 2 parameters: moduleName, and callback function. Hence, I could use the same way to load google map except the url to load and call load(). Here is from google documentation.


function mapsLoaded() {
   var map = new google.maps.Map2(document.getElementById("map"));
   map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
}

function loadMaps() {
   google.load("maps", "2", {"callback" : mapsLoaded});
}

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


To solve the previous problem, you could actually add the script tag of Google AJAX APIs, which describes more precisely at http://code.google.com/apis/ajax/documentation/. The Google AJAX APIs <script> tag loads a single method, while google.load() which loads individual AJAX APIs. With this method, you can load any specific Google API on demand.


function mapsLoaded() {
   var map = new google.maps.Map2(document.getElementById("map"));
   map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
}

function loadMaps() {
   google.load("maps", "2", {"callback" : mapsLoaded});
}