2024
04
25
2010
08
31
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 の利用例を紹介しましょう。
PR
2010/08/31 (Tue.) Trackback() Comment(0) Google Ajax API
Comments
Trackback
Trackback for this entry：
