可以完全的使用 JavaScript 與 HTML 輕易的做出動態網站. 例如地圖, 動態搜尋, RSS 閱讀器, 只需要少少的幾行 JavaScript.
在網頁上加入 Google Map.
在網頁上整合 Google Search, 也包含了 Video, Local, News.
使用 JavaScript 下載 Atom/RSS feeds.
將 Google Earth 新增到網頁上.
Getting Started
使用 Googe AJAX APIs 會需要會需要一個 Google API key, 可以在這幾個地方取得, 不管是哪邊取得的都是一樣的.
取得 Google API key 之後, 放在最上面引用進來.
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>
<script type="text/javascript">
google.load("maps", "2");
google.load("search", "1");
function initialize() {
// do something
}
google.setOnLoadCallback(initialize);
</script>
google.load
google.load 的用法:
google.load(moduleName, moduleVersion, optionalSettings)
moduleName: API 名稱(如: "maps", "search"). 這個名稱同樣也是 API 的 namespace.
version: 指定 API 版本.
optionalSettings: 指定 API 其餘的選擇性參數. 例如, 你可以這樣指定 Maps API 使用日本語.
google.load("maps", "2", {"language" : "ja_JP"});
可選參數有:
API Namespaces
API 的模組名稱同時也是它的 namespace. 所以 "maps" 模組, 在讀取之後就是放在 google.maps 這個命名空間底下.
API Versioning
版本是 google.load 的第二個參數, 最初的時候版本是用在 Google Maps API 上. 每個 AJAX API 都有主版次跟修正版次, 組成 VERSION.REVISION. 同時版本也分為穩定與測試版次. 如果指定使用 "2" 則會自動取得穩定版本. 而指定使用 "2.x" 則會自動抓取測試版次.
Dynamic Loading
要在使用者需要的時候才將需要的 API 讀取進來, 可以透過傳遞 callback 參數來達到目
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});
}
還有一個更徹底的方式, 連 Google AJAX API loader 也經由動態建立 script 標籤引用進來, 在引用的 URL, "http://www.google.com/jsapi?..." 額外的加上 callback 參數.
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);
}
google.loader.ClientLocation
一使用 AJAX API loader 時, 就會根據用戶的 IP 地址來取得實際的地理位置. 如果成功的話會取得 google.loader.ClientLocation 否則的話則會取得 null.
Google Maps API
名稱: maps
版本: 2, 2.x
讀取請求: google.load("maps", "2");
支援選項: callback, base_domain, language, other_params
Google AJAX Search API
名稱: search
版本: 1
讀取請求: google.load("search", "1");
支援選項: callback, language, nocss
Google AJAX Feeds API
名稱: feeds
版本: 1
讀取請求: google.load("feeds", "1");
支援選項: callback, language, nocss
Google AJAX Language API
名稱: language
版本: 1
讀取請求: google.load("language", "1");
支援選項: callback, language, nocss
Google data APIs
名稱: gdata
版本: 1, 1.x
讀取請求: google.load("gdata", "1");
支援選項: none
Google Earth API
名稱: earth
版本: 1
讀取請求: google.load("earth", "1");
支援選項: none
Google Visualization API
名稱: visualization
版本: 1
讀取請求: google.load("visualization", "1");
支援選項: packages