お気に入り | 日本語 | ログイン

デベロッパー ガイド

Google AJAX API の使用

目次

スタート ガイド

Google には、Maps APIAJAX Search APIAJAX 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.load

Google 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 名前空間

API のモジュール名はその名前空間でもあります。このため "maps" モジュールのシンボルは、モジュールがロードされたときに名前空間 google.maps で使用できます。Maps API など既存の Google AJAX API は、エクスポートされたクラスと定数のすべてで接頭辞 G を使います。この新しい命名規則では、クラス名に接頭辞 G が付かなくなります。たとえば、GMap2google.maps.Map2 になります。

現在接頭辞 G を使う API は、新しい命名規則と古い命名規則の両方を引き続きサポートします。将来的には、API は google.moduleName 名前空間でのみ使用できるようになります。

API バージョニング

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 は、次のリビジョンがプッシュされるまで、テスト バージョンのままです。

推奨する使用法のモデルは次のとおりです:

  • 本番の HTML では、各 API の安定バージョン(たとえば 2)を使います。
  • 開発マシン上では各 API のテスト バージョン(たとえば 2.x)を使います。問題があった場合、その API のデベロッパー フォーラムで報告してください。特定の API リビジョンで多くのユーザーが重大な問題に遭遇した場合、Google はリビジョンを戻すか停止します。

API の任意の旧バージョンはいつでもリクエストできますが、旧バージョンの API は公式にはサポートされません。多くの場合、サーバー側の変更により、旧バージョンの API の使用を停止する必要性が生じます。ただし、レガシー バージョンの API に依存しているデベロッパーに、アップグレードのための時間をできるだけ多く確保するために、各 API の旧バージョンはサーバー上で長期間維持されます。

動的ロード New!

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);
}

google.loader.ClientLocation New!

アプリケーションで 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";
}

利用できる AJAX API

次の Google AJAX API を使用できます。

Google MAPS API
名称: maps
バージョン: 2、2.x
読み込みリクエスト: google.load("maps", "2");
サポートされるオプション: callback, base_domain, language, other_params
注: 2.92 と最新バージョン(2.x)の間のバージョンも指定できます。詳細については、Maps API のドキュメントおよび API の変更履歴を参照してください。
Google AJAX Search API
名称: search
バージョン: 1
読み込みリクエスト: google.load("search", "1");
サポートされるオプション: callback, language, nocss
Google AJAX Feed API
名称: feeds
バージョン: 1
読み込みリクエスト: google.load("feeds", "1");
サポートされるオプション: callback, language, nocss
Google AJAX Language API API
名称: language
バージョン: 1
読み込みリクエスト: google.load("language", "1");
サポートされるオプション: callback, language, nocss
Google DATA API
名称: gdata
バージョン: 1、1.x
読み込みリクエスト: google.load("gdata", "1");
サポートされるオプション: なし
Google Earth API
名称: earth
バージョン: 1
読み込みリクエスト: google.load("earth", "1");
サポートされるオプション: なし
Google VISUALIZATION API
名称: visualization
バージョン: 1
読み込みリクエスト: google.load("visualization", "1");
サポートされるオプション: packages