Google Maps API

Maps API
- デベロッパーガイド
- コードサンプル:
  - デモギャラリー
  - 例
- リファレンス

静的 Maps API
- デベロッパーガイド

Mapplets API
- ホームページ
- ドキュメント

Google Maps API の概念

Google Maps API のデベロッパー向けドキュメントにようこそ。Google Maps JavaScript API を使用すると、ご自分のウェブページに Google マップを組み込むことができます。この API を使用するには、まず登録してAPI キーを取得する必要があります。API キーを取得したら、このドキュメントの指示に従って地図アプリケーションを開発できます。

New! Google ストリートビュー - ストリートビューパノラマオブジェクトを Maps API アプリケーションに統合します。

対象読者

このドキュメントは、JavaScript のプログラミング概念とオブジェクト指向プログラミング概念を理解している読者を対象にしています。また、読者はユーザーの観点から Google マップについて理解している必要もあります。ウェブ上では多くの JavaScript チュートリアルが公開されています。

このドキュメントは概念について説明しているため、すべての情報を網羅しているわけではありません。Google Maps API を使用して魅力的なアプリケーションの設計と開発をすばやく開始できるように支援することを目的としています。比較的詳しい情報が記載された Google Maps API リファレンスも提供されています。

この度、ドキュメントの構成を変更して、概念情報をさらに追加すると共に、内容を次の主要項目に分割しました。

この構成変更は、特に Maps API を初めて利用するデベロッパーにとって理解しやすくすることを目的としています。このドキュメントに関するご意見もぜひお寄せください。この API に関するご意見を提供くださる方や、情報交換を行いたい方は、Maps API 開発者ヘルプグループに参加してください。

Google Mapplet を作成

Google Maps API で新たにサポートされた Mapplet (Map + Gadget) を使用すると、外部で提供されているアプリケーションを Google マップ内に組み込むことができます。これらの Mapplet は独自の iFrame 内で実行され、ユーザーは「マッシュアップのマッシュアップ」を作成して、たとえば 2 つのサイトのコードを組み合わせることができます。これにより、Google マップ内でのまったく新しいコーディング環境が得られます。Mapplet は簡単に作成できますが、いくつかの作業は標準の Google Maps API の場合とは異なる方法で行います。詳細については、Google マップの Mapplets のドキュメントとリファレンスを参照してください。

Google AJAX API ローダーを使用

Google Maps API は、Google AJAX API と完全に統合されています。このフレームワークによって、サポート対象のすべての Google AJAX API (Google マップを含む) に対して 1 つの API キーを読み込むことができます。各 API で共通の名前空間を使用できるため、複数の Google API を連携させることができます。また、Google AJAX API フレームワークを使用しない場合は、既存の名前空間を引き続き使用できますので心配はご無用です。

Google AJAX API フレームワークの使用は比較的簡単です。このフレームワークを使用するようにアプリケーションを変更する方法は次のとおりです。

この API を http://maps.google.com/apis から読み込む代わりに、共通ローダーを http://www.google.com/jsapi から読み込みます。既存の Google Maps API キーは次の URL に渡すことができます。
```
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>
```
希望する特定の API を google.load メソッドを使用して読み込みます。google.loadメソッドは、読み込む API の名前とバージョン番号の引数をとります。
```
<script type="text/javascript">
  google.load("maps", "2");
</script>
```

Google Maps API で現在使用しているすべてのクラス、メソッド、プロパティ用に google.maps.* 名前空間を使用して、G プレフィックスをこの名前空間で置き換えます。オブジェクトの初期化には、google.setOnLoadCallback() を使用します。たとえば Google AJAX API ローダーの使用時は、GMap2 オブジェクトは google.maps.Map2 にマップされます。

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>
<script type="text/javascript">
  google.load("maps", "2.x");
   
  // ページが読み込まれたときにこの関数を呼び出します
  function initialize() {
    var map = new google.maps.Map2(document.getElementById("map"));
    map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
  }
  google.setOnLoadCallback(initialize);
</script>

Google AJAX API ローダーの使用に関する詳細については、http://code.google.com/apis/ajax/documentation/ を参照してください。

Google Maps API のローカライズ

Google Maps API では、コントロール名、著作権表示、および運転ルートなどのテキスト情報の表示は、デフォルトで英語が使用されます。Maps API を特定の言語で情報を適切に表示するように変更するには、使用するドメイン言語を指定する Mpas API javascript コードを含める際に、オプションの hl パラメータを <script> タグに追加します。

たとえば、Maps API アプリケーションをドイツ語で表示するには、次のように &hl=de を <script> タグに追加します。

<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&hl=de"

サポートされているドメイン言語のリストも参照してください。サポート言語は頻繁にアップデートされるため、このリストがすべてのサポート言語を網羅しているとは限りません。

プログラミングに関する注記

Google Maps API の使用を開始する前に、次の注意事項を参照して、作成するアプリケーションがすべての対象プラットフォームで正常に動作することを確認する必要があります。

ブラウザの互換性

Google Maps API は、Google マップウェブサイトと同じブラウザをサポートしています。このスクリプト http://maps.google.com/maps?file=api&v=2 はほぼすべてのブラウザでエラーなしで解析できるため、互換性をチェックする前にこのスクリプトを問題なく組み込むことができます。

互換性のないブラウザを使用するユーザーには、アプリケーションごとに異なる動作を実装することが必要になる場合があります。Maps API は、互換性をチェックするためのグローバルメソッド (GBrowserIsCompatible()) を提供していますが、互換性のないブラウザを検出したときの自動動作は用意されていません。このドキュメント内のほとんどの例では、ブラウザの互換性はチェックされず、古いブラウザに対してエラーメッセージが表示されることもありません。実際のアプリケーションでは、互換性のないブラウザについてはなんらかの便宜上の処理が行われるはずですが、このドキュメントでは例を簡潔にするためにこのようなチェック処理は省略しています。

複雑なアプリケーションでは、ブラウザとプラットフォーム間の不整合が必然的に発生します。これらの問題に対する簡単な解決策はありませんが、Google Maps API 開発者ヘルプグループと quirksmode.org はどちらも対処法を見つけるのに役立つサイトです。

XHTML と VML

地図が掲載されたページでは、標準に準拠した XHTML を使用することをお勧めします。ブラウザは、ページの先頭で XHTML の DOCTYPE 宣言を検知すると、そのページを「標準準拠モード」で表示し、その結果として各種のブラウザでそのページのレイアウトと動作の予測可能性が大幅に高まります。この宣言のないページは、下位互換モード (Quirks Mode) で表示されることがあり、その結果として一貫性のないレイアウトになる可能性があります。

地図上でポリライン (Google マップで道路ルートを表示するために使用されるラインなど) を表示するには、XHTML ドキュメントに VML 名前空間を組み込んで Internet Explorer ですべての要素が正常に動作できるようにする必要があります。XHTML ドキュメントの開始部分は次のようになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

API の更新

http://maps.google.com/maps?file=api&v=2 URL 内の v パラメータは、使用する Google Maps API の「バージョン」番号を表しています。Maps API のほとんどのユーザーは、この URL 内で v=2 パラメータを渡して現在の「バージョン2」API を使用することをお勧めします。代わりに、v=2.x パラメータを渡して最新リリース (最新機能を含む) を取得することもできます。ただし、最新リリースは v=2 リリースより信頼性が低い場合があるので注意してください。Google Maps API は頻繁に (場合によっては毎週) 更新され、更新時には問題が発見されない限り v=2.x リリースの機能が v=2 リリースに取り込まれます。

さらに、v=2.s パラメータを渡すことで「安定」バージョンの API を使用できます。このバージョンは更新頻度が低く、およそ数か月ごとに更新されます。v=2 リリースと v=2.x リリースはおよそ 2 週間ごとに更新されるため、一部のデベロッパーは安定した v=2.s を優先的に使用しています。安定バージョンは現行バージョンより数バージョン古いことがあるため、一部の最新機能を含んでいない可能性があります。

API の各バージョンは、更新されるたびに番号が割り当てられます (「バージョン 2.76」など)。API が更新された場合、以前のバージョンに基づいた古いコードは公表されているとおりに動作しないことがあります。アプリケーションで特定バージョンの API を使用する必要がある場合は、そのバージョンを v パラメータで指定してください (例: v=2.75)。ただしこの方法はお勧めしません。更新されたコードをプロダクトのベースにすることが常に理想的です。

今後 API を大幅に更新する場合は、メジャーバージョン番号を更新して、Google Code と Maps API デベロッパーヘルプグループに通知を掲載します。その場合は、コードを移行するための猶予期間として 1 か月以上は両方のバージョンをサポートする予定です。

Maps チームは、最新のバグフィックスやパフォーマンス強化で API を透過的に更新することもあります。これらのバグフィックスはパフォーマンス向上とバグ修正のみを目的としていますが、意図せずに一部の API クライアントに障害をもたらすことがあります。このような問題のご連絡には、Maps API デベロッパーヘルプグループを使用してください。

v1 アプリケーションをアップグレード

このドキュメントは、2006年4月3日に公開された Maps API のバージョン 2 について述べています。API に Maps API のバージョン 1 を使用している場合 (2006年4月3日より前にサイトを作成した場合) は、ウェブサイトをアップグレードしてみてください。詳細については、バージョン 2 アップグレードガイドを参照してください。

Maps API 内の例

このドキュメント内のほとんどの例では、HTML ファイル全体ではなく関連する JavaScript コードのみを表示しています。これらの JavaScript コードを各自のスケルトン HTML ファイルに挿入することも、例の後のリンクをクリックして各例の HTML ファイル全体をダウンロードすることもできます。

ブラウザのメモリリークを防止

Google Maps API では関数クロージャの使用を推奨しています。API イベントハンドルシステムの GEvent による DOM ノードへのイベントの添付方法では、Internet Explorer などの一部のブラウザで、高い確立でメモリリークが発生してしまいます。Maps API のバージョン 2 で導入された新しいメソッドの GUnload() によって、これらのメモリリークの原因となる循環参照のほとんどが解消されます。作成したページの onunload イベントで次のように GUnload() を呼び出して、アプリケーションでメモリリークが発生する可能性を低減させてください。

<body onunload="GUnload()">

この機能を使用すると、Google マップでの Internet Explorer のメモリリークをほぼ回避できますが、メモリ消費の問題が見受けられる場合は Drip などのツールを使用して各自のサイトでメモリリークが発生していないか調べてください。

その他の資料

ここではいくつかの追加の資料を紹介します。なお、これらのサイトは、Google が保有またはサポートしているものではありません。

Google Mapki:Mapki
Google Maps API Tutorial:http://econym.googlepages.com/index.htm
Esa's Google Maps API Examples: http://koti.mbnet.fi/ojalesa/exam/index.html
USNaviguide's Maps API Examples:http://maps.huge.info/examples.htm
Mark McClure's Encoded Polyline Examples: http://facstaff.unca.edu/mcmcclur/GoogleMaps/EncodePolyline/
Marcelo's Maps API Experiments:http://maps.forum.nu/
Bill Chadwick's Maps API Demos:http://www.bdcc.co.uk/Gmaps/BdccGmapBits.htm

トラブルシューティング

作成したコードが正常に機能しない場合は、次の方法によって問題を解決してみてください。

API キーが有効であることを確認します。
タイプミスがないか確認します。JavaScript では大文字と小文字が区別されます。
JavaScript デバッガを使用します。Firefox では、JavaScript コンソール、Venkman Debugger、Firebug アドオンのいずれかを使用できます。 IE では、Microsoft Script Debugger を使用できます。この一連のスクリーンキャストは、各種デバッグツールを使用する方法を示しています。
Maps API デベロッパーヘルプグループで解決策を探します。疑問への回答となる情報が見つからない場合は、グループに質問を投稿して、その問題を再現するウェブページへのリンクを添えてください。
その他の資料で、サードパーティのデベロッパー向け資料を参照します。


例: "ajax apis" または "open source"