寝太郎の江戸風呂。ね！

[PR]

2024/11/23 (Sat.)

Google Ajax API 動的ロード

Google Ajax API を利用するには、まず HEAD要素内に次の記述をすることとされています。

<script type="text/javascript"
src="http://www.google.com/jsapi?key=ABCDEFG"></script>

このような静的記述の他に、Google Ajax API には、動的に Google AJAX API を導入する方法が用意されています。 その説明は「Google AJAX API の使用 - 動的ロード」にあります。

動的ロードを利用すれば、HTMLと Google Ajax API を分離し、プラグインのような形で JavaScript アプリケーションを提供することが可能になります。

では、動的ロードの流れを簡単に説明しましょう。

１　SCRIPT要素の生成とHEAD要素への追加
document.createElement('script')で SCRIPT要素を生成します。
そして、その src属性を
"http://www.google.com/jsapi?key=ABCDEFG&callback=loadPackage"
のように指定します。
callbackパラメータを記述することで、Google Ajax API　のロード後にそのコールバック関数が実行されます。
生成した SCRIPT要素をHEAD要素に追加します。

２　コールバック関数
上記の src要素で記述したコールバック関数を定義します。
通常、パッケージをロードする記述をします。
マップパッケージをロードする場合には、次のような記述になります。

function loadPackcage(){
google.load("maps", "2", {"callback" : packageLoaded});
}

ここで大事なのは、google.load の３番目の引数であるオブジェクトの中で、 　　パッケージのロード後に実行する関数を callback オプションで指定することです。

３　パッケージロード後実行関数
パッケージのロード後に実行される関数を定義します。
function packageLoaded() {

}
ロードされたパッケージのクラスを利用して、処理を記述します。

このように二度に渡ってコールバック関数を利用することによって、Google Ajax API を利用することができます。

次回は、この動的ロードによる Google Ajax API の利用例を紹介しましょう。

2010/08/31 (Tue.) Trackback() Comment(0) Google Ajax API