Google API loader allows you to easily import one or more APIs, and specify additional settings (such as language, location, API version, etc.) applicable to your needs.
In addition to the basic loader functionality, savvy developers can also use dynamic loading or auto-loading to enhance the performance of your application.
Table of Contents
Introduction to Loading Google APIs
To load the APIs, include the following script in the header of your web page.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
Next, load the Google API with google.load(module, version)
,
where
module
calls the specific API module you wish to use on your page.version
is the version number of the module you wish to load. The example below loads the latest stable version of the search API, and the specified versions of the JQuery and JQuery UI libraries.
<script type="text/javascript"> google.load("search", "1"); google.load("jquery", "1.4.2"); google.load("jqueryui", "1.7.2"); </script>
After you call google.load
, you can use all of the loaded modules
in your web page. For specific examples of each API, visit the documentation specific to the
desired API (see links in the left navigation).
The loader is cached in the user's browser for up to one hour.
Detailed Documentation
google.load
google.load(moduleName, moduleVersion, optionalSettings)
,
allows you to call individual APIs by version, where:
moduleName
is the name of the API (e.g.,"visualization"
or"search"
).version
specifies the version of the API module, as described below. You must always specify the version of the API you are using. If you are unsure which version you want to use, use the version stated in the in the documentation for each API.optionalSettings
specifies all optional configuration options for the API you are loading as a JavaScript object literal. Different APIs have different options as listed in available APIs. The possible properties are:callback
: The function to call once the script has loaded. If using the Auto-loading feature, this must specify a function name, not a function reference.language
: The language in which to localize the API's UI controls. This is specified as a ISO639 language code.nocss
: A boolean that tells the API whether to load any style sheets typically associated with its controls. If you don't intend to use the default CSS, you can reduce the load time by setting this totrue
. The default setting isfalse
.packages
: An array of strings specifying related packages to be read in along with the core API. For example, you could load "piechart" and "table" along with the Visualization API.base_domain
: The base domain from which to load the API.other_params
: Specific parameters supported by a particular API (and usually very specific to the API). An alternative to passing in a parameter via a<script>
tag.
- Use the stable version of each API in the production HTML.
- Use the test version of each API (e.g., 2.x) on your development machines, and report any issues you find in the developer forum for that API. If many users encounter serious issues with a particular API revision, Google will revert or hold back the revision.
- Earth
- gData
- Orkut
Versioning
The second parameter of google.load
is the version of the API. Every API has a major version and revision number, of the form VERSION.REVISION
. Every time an an API introduces new JavaScript, the revision number increases. So if an API is currently on version 2.2.3, and the team does an update, the next version becomes 2.2.4.
Our APIs are updated frequently, so to ensure stability, all of our APIs have an active stable version as well as a test version. Every time a team introduces a new API version, the previous version becomes the stable version of the API, and the most recent becomes the test version.
To always load the latest stable version of the API, request the version number without specifying a revision. So, using the above example, requesting version 2 loads the latest stable revision of the API, e.g., 2.2.3.
To always load the test version of the API, you can use the wildcard 2.x.
The usage model Google encourages is:
While you can technically request any older version of an API at any time, old versions of APIs are not officially supported. In many cases, server-side changes will require that you stop using old versions of the API. However, Google tries try to keep old versions of each API for long periods of time, so you have ample time to upgrade.
Dynamic Loading
The standard google.load
functionality loads the API(s) when your
page loads; however, you can also load the API dynamically. This is useful if you
don't need the API to be available when the page loads, such as when a user performs
a search or some other action.
Dynamic load is not possible for the following APIs, because they do not support callbacks:
To load the API dynamically, pass a callback
option in the
third parameter. The below example loads the Visualization API, and specifies
the callback function: pageLoaded
.
function loadApi() { google.load("visualization", "1", {"callback" : pageLoaded}); }
Make sure the DOM is ready when you call google.load
with the
callback
option. You need to do this because the loader may will
to append an element to the DOM. Subsequent calls to load the API will
immediately execute the provided callback, so you don't have to worry about
loading the same API more than once.
You can load the Google API loader dynamically by creating a script
element
and setting its source to the same "https://www.google.com/jsapi"
URL
with an additional query callback
parameter. The callback will be
executed when the loader is ready. See the snippet below:
Auto-Loading
It is possible to auto-load a list of APIs or Javascript libraries when including the loader script. This allows you to reduce the load time in many cases by reducing the number of JavaScript requests that run at load time.
Warning! This advanced feature can be difficult to implement, depending on the exact situation. Therefore, we recommend that you consider auto-loading only in specific instances where reducing latency is crucial.
To autoload APIs manually, you need to specify the list of APIs to load in the initial<script>
tag, rather than in a separate google.load
call
for each API. For instance, the object declaration to auto-load version 1.0 of the Search
API (English language) and the local search element, would look like:
{ "modules" : [ { "name" : "search", "version" : "1.0", "language" : "en" }, { "name" : "elements", "version" : "1.0", "packages" : [ "localsearch" ] } ] }
This would be compressed to:
{"modules":[{"name":"search","version":"1.0","language":"en"},{"name":"elements","version":"1.0","packages":["localsearch"]}]}
And then URL encoded to:
%7B%22modules%22%3A%5B%7B%22name%22%3A%22search%22%2C%22version%22%3A%221.0%22%2C%22language%22%3A%22en%22%7D%2C%7B%22name%22%3A%22elements%22%2C%22version%22%3A%221.0%22%2C%22packages%22%3A%5B%22localsearch%22%5D%7D%5D%7D
This whole string is then appended as the value of the autoload
parameter
in the initial <script>
tag:
<script src="https://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22search%22%2C%22version%22%3A%221.0%22%2C%22language%22%3A%22en%22%7D%2C%7B%22name%22%3A%22elements%22%2C%22version%22%3A%221.0%22%2C%22packages%22%3A%5B%22localsearch%22%5D%7D%5D%7D"></script>
Auto-loading supports all of the options that can be passed in using google.load(module,
version, options)
. See above for the available
options and below for information on which options
are supported by each API.
Note: The callback option is supported, but the value must supply the name of a function, rather than a function reference.
Available APIs
The following Google APIs are available:
- Google Search API (see below for links to specific searchers)
- name: search
- versions: 1
- load request:
google.load("search", "1");
- supported options:
callback, language, nocss
- note: The
following APIs use the
google.load("search", "1");
load request: Blog Search, Book Search, Image Search, News Search, Patent Search, and Video Search.
- Google Feeds API
- name: feeds
- versions: 1
- load request:
google.load("feeds", "1");
- supported options:
callback, language, nocss
- Google Data APIs
- name: gdata
- versions: 1, 1.x
- load request:
google.load("gdata", "1");
- supported options:
packages
- Google Earth API
- name: earth
- versions: 1
- load request:
google.load("earth", "1");
- supported options: none
- Google Visualization API
- name: visualization
- versions: 1
- load request:
google.load("visualization", "1");
- supported options:
packages, language, callback
- Orkut API
- name: orkut
- versions: 1
- load request:
google.load("orkut", "1");
- supported options:
packages
- Google Picker API
- name: picker
- versions: 1
- load request:
google.load("picker", "1");
- supported options:
language
,callback