Google には、Maps API、AJAX Search API、AJAX Feed APIのように、サーバーサイド コードを伴わずにウェブページで使用できる AJAX API が多数あります。ウェブ ページで API を使用するには、ウェブページの最上部に Google API キーを記述した <script> タグを 1 つ含めるだけです。
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>
Google API キーをまだ持っていない場合、無償で登録して API キーを入手できます。
Google AJAX API スクリプトがロードされたら、ページで google.load とともに使うモジュールを指定します。
<script type="text/javascript">
google.load("maps", "2");
google.load("search", "1");
</script>
上の例では、Maps API のバージョン 2 と、AJAX Search API のバージョン 1 がロードされます。google.load を呼び出すことで、ロードされたモジュールのすべてをウェブ ページで使うことができます。また、ドキュメントがロードされたら、google.setOnLoadCallback を使って、指定された呼び出し対象のハンドラ関数を登録します。そのすべてをまとめた例を次に示します。
<html>
<head>
<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");
// 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>
google.setOnLoadCallback は、ドキュメントのロード時に 1 度だけ、window.onload のヘルパーとして使用されます。したがって、API を動的にロードするためには(ユーザー インタラクションの後など)、コールバック オプションのある google.load を代わりに使用する必要があります(下記参照)。
google.loadGoogle AJAX API <script> タグは、単一のメソッド google.load をロードします。このメソッドが個別の AJAX API をロードします。メソッドは次のプロトタイプを持っています。
google.load(moduleName, moduleVersion,
optionalSettings)
moduleNameは、API の名前です(例: "maps"、"search")。モジュールがロードされると、モジュール名は API の名前空間の役割も果たします。
version以下で説明するように、API モジュールのバージョンを指定します。これは必須の引数です。使用する API のバージョンは必ず指定する必要があります。どのバージョンを使うか確定していない場合、使用する API のドキュメントや例で用いられているバージョンを使用することをおすすめします。
optionalSettings は、ロードする API のすべての省略可能な構成オプションを、JavaScript のオブジェクト リテラルとして明示します。たとえば、Maps API のユーザー インターフェースの言語を日本語に指定するには、次のように書きます。
google.load("maps", "2", {"language" : "ja_JP"});
以下に示すように、ロードされる API でデフォルトの CSS をロードしないように指定することもできます、
google.load("feeds", "1", {"nocss" : true});
可能なオプションの一部を次に示します。
callback: スクリプトのロード後に呼び出す関数。language: API や API の UI コントロールをローカライズする言語。ISO639 言語コードで指定します。nocss: 制御に関連付けられていることが多いスタイル シートをロードするかどうかを API に伝えるブール値。ロードしたすべての CSS を無効にしていて、不要なロードを回避したい場合などに、デベロッパーはこのオプションを true に設定することができます。packages: コア API と一緒に読み込む関連パッケージを指定する一連の文字列。たとえば、Visualization API と一緒に「piechart」と「table」をロードできます。base_domain: ロードする API の基本ドメインたとえば、Maps API の中国語版を取得するには、「maps」モジュールと一緒に「ditu.google.cn」からロードします。other_params: これは、特定の API によってのみサポートされる(API 特有の)オプションを含むオブジェクトです。通常 API のスクリプト タグを介してパラメータで送信している場合は、代わりに other_params で送信できます。各 API でサポートされているオプションについての詳細は、以下のセクションを参照してください。
API のモジュール名はその名前空間でもあります。このため "maps" モジュールのシンボルは、モジュールがロードされたときに名前空間 google.maps で使用できます。Maps API など既存の Google AJAX API は、エクスポートされたクラスと定数のすべてで接頭辞 G を使います。この新しい命名規則では、クラス名に接頭辞 G が付かなくなります。たとえば、GMap2 は google.maps.Map2 になります。
現在接頭辞 G を使う API は、新しい命名規則と古い命名規則の両方を引き続きサポートします。将来的には、API は google.moduleName 名前空間でのみ使用できるようになります。
google.load の 2 番目のパラメータは、もともと Google Maps API で使われたバージョニング システムに従ってモデル化された API のバージョンです。AJAX API はすべて、メジャー バージョンとリビジョン番号を持っており、VERSION.REVISION という形式をしています。AJAX API が新しい JavaScript を導入するたびに、リビジョン番号が増えていきます。つまり、AJAX Search API がバージョン 2.23 で、チームがアップデートを行うと、新しい JavaScript はバージョン 2.24 になります。
AJAX API は頻繁にアップデートされるため、安定性を確保するために、AJAX API にはすべて、アクティブな安定バージョンとテスト バージョンがあります。チームで新しい API リビジョン、たとえば 2.24 が導入されると、前のリビジョン 2.23 が API の安定バージョンになります。バージョン 2.24 はテスト バージョンです。リビジョンを指定せずに API のバージョン 2 をリクエストすると、自動的に API の安定リビジョン (2.23) が渡されます。API のテスト バージョンを入手するには、明示的にバージョン 2.24 をリクエストします。常に API のテスト バージョンを指す特別なワイルドカード 2.x を使うこともできます。バージョン 2.24 は、次のリビジョンがプッシュされるまで、テスト バージョンのままです。
推奨する使用法のモデルは次のとおりです:
API の任意の旧バージョンはいつでもリクエストできますが、旧バージョンの API は公式にはサポートされません。多くの場合、サーバー側の変更により、旧バージョンの API の使用を停止する必要性が生じます。ただし、レガシー バージョンの API に依存しているデベロッパーに、アップグレードのための時間をできるだけ多く確保するために、各 API の旧バージョンはサーバー上で長期間維持されます。
AJAX API ローダーは、ウェブサイト上で動的にインクルードすることができます。これは、ページがロードされるときに API が利用できなくてもよい場合に有用です。たとえば、ユーザーが検索などのアクションを行う場合です。
これは、次に示すように、3 番目のパラメータで 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});
}
loadMaps() を呼び出すとMaps API がロードされ、API の準備ができると mapsLoaded コールバックが実行されます。callback オプションを使って google.load を呼び出す場合、DOM の準備ができていることを確認してください。DOM に要素を付加しようとするためです。それ以降、ロードするためにMaps API を呼び出すと、提供されたコールバックがすぐに実行されるようになるため、同じ API を複数回ロードすることを心配する必要はありません。
script 要素を作成して、そのソースを同一の "http://www.google.com/jsapi?..." URL に設定し、クエリ callback パラメータを追加することで、動的に Google AJAX API ローダーをロードすることができます。コールバックは、ローダーの準備ができたときに実行されます。下のスニペットをご覧ください:
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);
}
アプリケーションで AJAX API ローダーを使用する場合、ローダーはクライアントの IP アドレスからクライアントの地理的な位置情報の特定を試みます。このプロセスが成功すると、メトロ レベルのクライアントの位置情報を google.loader.ClientLocation プロパティで取得できます。プロセスが失敗した場合は、このプロパティは null に設定されます。
google.loader.ClientLocation オブジェクトを作成すると、以下に示すメトロ レベルのプロパティと共に読み込まれます。
ClientLocation.latitude — クライアントの IP アドレスに関連付けられた低解像度の緯度ClientLocation.longitude — クライアントの IP アドレスに関連付けられた低解像度の経度ClientLocation.address.city — クライアントの IP アドレスに関連付けられた都市名ClientLocation.address.country — クライアントの IP アドレスに関連付けられた国名ClientLocation.address.country_code — クライアントの IP アドレスに関連付けられた ISO 3166-1 の国名コードClientLocation.address.region — クライアントの IP アドレスに関連付けられた各国固有の地域名
このプロパティの使用時は、アプリケーションで多少の安全対策を行う必要があります。google.loader.ClientLocation は、IP アドレスと位置情報を照合することで作成されます。このようなマッピングは常に可能とは限りません。そのため、プロパティが null になる場合もあります。また、アドレスのプロパティをデータ構造のインデックスとして使用するアプリケーションの場合、結果の範囲検査を適切に行う必要があります。
以下のコード フラグメントは、API のユースケースの一例を示しています。
/**
* Set the currentState_ and currentCountry_ properties based on the client's
* current location (when available and in the US), or to the defaults.
*/
InTheNews.prototype.setDefaultLocation_ = function() {
this.currentState_ = this.options_.startingState;
if (google.loader.ClientLocation &&
google.loader.ClientLocation.address.country_code == "US" &&
google.loader.ClientLocation.address.region) {
// geo locate was successful and user is in the United States. range
// check the region so that we can safely use it when selecting a
// state level polygon overlay
var state = google.loader.ClientLocation.address.region.toUpperCase();
if (InTheNews.stateNames[state]) {
this.currentState_ = state;
}
}
this.currentCountry_ = "US";
}
次の Google AJAX API を使用できます。
google.load("maps", "2");callback, base_domain, language, other_paramsgoogle.load("search", "1");callback, language, nocssgoogle.load("feeds", "1");callback, language, nocssgoogle.load("language", "1");callback, language, nocssgoogle.load("gdata", "1");google.load("earth", "1");google.load("visualization", "1");packages