Google AJAX APIs

介紹

Google AJAX APIs

可以完全的使用 JavaScript 與 HTML 輕易的做出動態網站. 例如地圖, 動態搜尋, RSS 閱讀器, 只需要少少的幾行 JavaScript.

相關 APIs

取得 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"});

可選參數有:

• callback: 函數, 當 script 讀取之後, 會呼叫一次這個函數.
• language: 字串, 使用 ISO639 language code, 用來指定 API 的 UI 語言.
• nocss: boolean 值, 告知 API 是否要使用預設的 CSS.
• packages: 字串陣列, 用來指定需要讀取的相關 packages, 例如, 在視覺化 API 裡面你可能同時需要 'piechart' 跟 'table' 兩個 packages.
• base_domain: 字串, 指定從那個 domain 來讀取 API. 例如, 在 "maps" 裡面指定 "ditu.google.cn" 可以取得中文版的 Maps API.
• other_params: JSON 格式, 用於一些特殊的 API. If you would typically send in a parameter by via a script tag for an API, you can send it in other_params instead.

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.

• ClientLocation.latitude - IP 所在的緯度
• ClientLocation.longitude - IP 所在的經度
• ClientLocation.address.city - IP 所在的城市名稱
• ClientLocation.address.country - IP 所在的國家名稱
• ClientLocation.address.country_code - IP 所在的國家代號, 根據 ISO 3166-1 country code
• ClientLocation.address.region - IP 所在的國家區域名稱

現有的 AJAX APIs

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