Return to Google Maps.
 Google Maps API ドキュメント

Google Maps API
Sign up for an API key
API Documentation
API Terms of Use
API Blog
API Discussion Group

Google Desktop API
Write handy plug-ins for Google Desktop Search.


Google AdWords API
Manage your accounts, build new tools, pull reports, and more.

 

(訳注:2006年3月1日に取得した原文を元にしています。コメントなどありましたら,ブログのGoogle Maps APIのエントリにコメントを入れてください)

Google Maps JavaScript APIは、Google Mapsをあなたのウェブページに埋め込めるようにします。このAPIを使うには、APIキーのサインアップを行い、以下の指図に従う必要があります。

このAPIは新しく、そのためバグがあるかもしれませんし、完全ではない資料がわずかにあるだけです。私たちが穴を埋めている間辛抱していただくと共に、このAPIについてフィードバックと議論をするためにMaps APIディスカッショングループに参加してください(訳注:日本語で議論できるGoogle-Maps-API-Japanもあります)。

目次

序論
対象者
Google Mapsの"Hello, World"
ブラウザの適合性
XHTMLとVML
APIの更新
住所変換、経路探索等
基本
地図の移動とアニメーション
コントロールの地図への追加
イベントリスナ
情報ウィンドウのオープン
地図オーバーレイ
クリックハンドリング
マーカー上の情報ウィンドウ表示
アイコンの生成
アイコンクラスの使用
XMLと非同期RPC("AJAX")の利用
トラブルシューティング
その他のリソース
概要
GMapクラス
イベント
情報ウィンドウ
オーバーレイ
コントロール
XMLとRPC
クラスリファレンス
GMap
GMarker
GPolyline
GIcon
GEvent
GXmlHttp
GXml
GXslt
GPoint
GSize
GBounds

序論

対象者

この資料はJavaScriptのプログラミングとオブジェクト指向プログラミングの概念を良く知っている人向けにデザインされています。ユーザ視点からみたGoogle Mapsもよく知っているべきです。

Google Mapsの"Hello, World"

このようなAPIの学習を開始する最も簡単な方法は、単純な例を見ることです。以下のウェブページはPalo Altoを中心にした300x300(訳注:500x300の間違い?)の地図を表示します:

<!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">
  <head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

	<title>Google Maps JavaScript API Example: simple</title>
	<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAEfCuQGsNiSWxRgf_vfNWaRQjskl1-YgiA_BGX2yRrf7htVrbmBTEB0IH-F489GrwP8-dHLib7cKKIQ"
			type="text/javascript">
	</script>

	<script type="text/javascript">
	//<![CDATA[

	function onLoad() {

	  // 基本
	  //

	  // 地図を生成し、Palo Altoを中心にします
	  
	  if (GBrowserIsCompatible()) {
		var map = new GMap(document.getElementById("map"));
		map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
	  }
	}

	//]]>
	</script>
  </head>
  <body onload="onLoad()">

	<div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

この例を編集したりいじくりまわして遊んだりするためにダウンロードすることができますが、ファイル中のキーをあなたのMaps APIキーで置き換える必要があります(もし、特定のディレクトリでキーを登録した場合、そのキーは全てのサブディレクトリでも同様に機能します)。

上の例の中のURL(http://maps.google.com/maps?file=api&v=1)は、あなたのページにGoogle Mapを置くのに必要なシンボルの全てを含んだJavaScriptファイルの場所です。あなたのページはこのAPIのサインアップしたときに取得したキーを使ってそのURLを指すscriptタグを含まなければなりません。Maps APIキーが"abcdefg"だとすると、scriptタグはこのように見えるでしょう:

<script src="http://maps.google.com/maps?file=api&v=1&key=abcdefg"

		type="text/javascript">
</script>

Google Maps APIによってエクスポートされるメインクラスはGMapです。このクラスはページ上の一つの地図を表します。このクラスのインスタンスを望むだけ(ページ上の各地図につき一つ)生成することができます。新しい地図のインスタンスを生成するとき、地図を格納するページ上の名前付き要素(普通div要素)を指定します。明示的にサイズを指定しなければ、地図はサイズを決定するためにコンテナのサイズを用います。

地図インスタンスを操作したりオーバーレイを追加するメソッドは以下で詳しく述べます。

ブラウザの適合性

Google Maps APIは、Google Localサイトと同じブラウザをサポートしています。Google Localのサポートブラウザのリストをご覧ください。 適合性の無いブラウザでは、異なるアプリケーションは異なる動作を要求するので、このAPIは互換性をチェックするためのグローバルメソッド(GBrowserIsCompatible())を提供しています。しかし、このメソッドが適合性のないブラウザを検出したとき、自動的には何も行われません。スクリプトhttp://maps.google.com/maps?file=api&v=1は、ほとんど全てのブラウザでエラーなく解釈されます。そのため、適合性をチェックする前にこのスクリプトを安全にインクルードすることができます。

この資料では互換性をチェックする例(上記の最初の例を除く)や古いブラウザ用のエラーメッセージを表示する例ははありません。もちろん実際のアプリケーションは適合性のないブラウザにたいしてより親切するべきですが、例を読みやすくするためにそのようなチェックは省略します。

いくつかのブラウザは、JavaScriptに関して特有の癖を持っているかもしれないことに注意してください。たとえば、IEは表の中のJavaScriptを許しません。

XHTMLとVML

地図を含むページでは標準に準拠したXHTMLを用いることを推奨します。ブラウザはページの最上部にXHTML DOCTYPEを発見すると、ブラウザは「標準準拠モード」でページを実行します。このモードでは、異なるブラウザでもレイアウトや振る舞いを予想しやすくしなります。

(Google Mapsを使った道案内のように)地図上にポリラインを表示したい場合、IEで完全に動作させるためにVMLネームスペースといくつかのCSSコードをXHTMLドキュメントの中でインクルードする必要があります。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">
  <head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>


	<title>ページタイトル</title>
	<style type="text/css">
	v\:* {
	  behavior:url(#default#VML);
	}
	</style>
	<script src="http://maps.google.com/maps?file=api&v=1&key=abcdefg"

			type="text/javascript">
	</script>
  </head>

詳しくは、マイクロソフトのVMLワークショップをご覧ください。

APIの更新

URL http://maps.google.com/maps?file=api&v=1v=1の部分は、APIの「バージョン1」に関係します。将来、APIを大幅に変更したとき、バージョン番号を変更し、Google CodeMaps APIディスカッショングループに通知を掲示するでしょう。

新しいバージョンがリリースされた後、約1ヶ月の間古いバージョンと新しいバージョンを同時に実行できるようにするでしょう。1ヶ月後、古いバージョンは停止され、古いバージョンを使ったコードはもはや動かなくなるでしょう。

Google Mapsのチームは、最新のバグフィックスとパフォーマンスの増強で透過的にAPIを変更します。これらのバグフィックスはパフォーマンスの改善とバグの改修だけのはずですが、一部のAPIクライアントをうっかり壊してしまうかもしれません。このような問題を報告するには、Maps APIディスカッショングループを使ってください。

住所変換、経路探索等

現在のところGoogle Maps APIには、住所変換や経路探索のサービスは含まれていません; 特に、所在地住所で場所を指定することはできません。

しかしながら, ウェブ上にはフリーのジオコーダがいくつかあります; 特定の住所の緯度と経度が必要なら、これらの一つを利用することができます。

以下の各例では、完全なHTMLファイルではなく、関係のあるJavaScriptコードだけを示します。JavaScriptコードを以前示したスケルトンHTMLファイルに組み込んだり、各例の後のリンクをクリックして完全なHTMLファイルをダウンロードすることができます。

基本

以下の例(以前示した例のコードと同じ)は、地図を生成してPalo Altoを中心にします。Google Mapsサイトの地図をドラッグできるのと同じように、生成した地図をあちこちにドラッグできることに注意してください。

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

例を見る (simple.html)

地図の移動とアニメーション

recenterOrPanToLatLngメソッドは、地図を与えられた場所を中心に配置しなおします。指定された場所が現在の地図の表示範囲内にあるなら、滑らかにパンします; 表示範囲内に無ければ、その場所にジャンプします。

以下の例は地図を表示し、2秒後に新しい中心にパンします。

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
window.setTimeout(function() {
  map.recenterOrPanToLatLng(new GPoint(-122.1569, 37.4569));
}, 2000);

例を見る (animate.html)

コントロールの地図への追加

addControlメソッドを使って地図にコントロールを追加することができます。以下の例のコードでは、GSmallMapControl(地図のパンとズームさせるコントロールの小ぶり版)とGMapTypeControl(地図モードと衛星モードを切替えさせる)を追加追加します。

var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

例を見る (controls.html)

イベントリスナ

イベントリスナを登録するには、GEvent.addListenerを呼び出します。このメソッドには、地図とリッスンするイベント、指定したイベントが起こったときに呼ばれる関数を渡します。以下の例のコードでは、訪問者が地図をドラッグした後に地図の中心の緯度と経度を表示します。

この例は、HTMLの本文中の緯度と経度を表示する場所を表す"message"と名づけられたdivタグの存在に依存していることに注意してください。詳しくは例をご覧ください。

var map = new GMap(document.getElementById("map"));
GEvent.addListener(map, 'moveend', function() {
  var center = map.getCenterLatLng();
  var latLngStr = '(' + center.y + ', ' + center.x + ')';
  document.getElementById("message").innerHTML = latLngStr;
});
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

例を見る (event.html)

情報ウィンドウのオープン

情報ウィンドウを生成するには、openInfoWindowメソッドを呼び、場所と表示するためのDOM要素を渡してください。以下の例のコードは地図の中心を指し、単純に"Hello, world"メッセージを表示する情報ウィンドウを表示します。

主としてマーカー上に情報ウィンドウを配置するでしょうが、地図上ならどこにでも情報ウィンドウを配置することができます。

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
map.openInfoWindow(map.getCenterLatLng(),
				   document.createTextNode("Hello, world"));

例を見る (infowindow.html)

地図オーバーレイ

マーカーを地図に追加するには、最初にGPointを生成します; それからそのポイントを新しいGMarkeの位置として与えます; そしてマーカーをaddOverlayに渡します。

ポリラインを地図に追加するには、最初に点の配列を生成します; それからこれらの点を用いて新しいGPolylineを生成します; そしてポリラインをaddOverlayに渡します。

以下の例のコードは、地図のオーバーレイの使い方を説明するために、ランダムなマーカーとランダムなポリラインを生成します。

VML名前空間と必要なCSSコードを追加することを思い出してください; 詳しくはXHTML and VMLをご覧ください。

// 地図の中心をPalo Altoにする。
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

// デフォルトアイコンを使って10個のランダムなマーカー地図の表示範囲に追加する。
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
  var point = new GPoint(bounds.minX + width * Math.random(),
						 bounds.minY + height * Math.random());
  var marker = new GMarker(point);
  map.addOverlay(marker);
}

// ランダムな4点を持つポリラインを追加する。ラインが
// 自分自身で交差しないように、点を経度でソートする。
var points = [];
for (var i = 0; i < 5; i++) {
  points.push(new GPoint(bounds.minX + width * Math.random(),
						 bounds.minY + height * Math.random()));
}
points.sort(function(p1, p2) { return p1.x - p2.x; });
map.addOverlay(new GPolyline(points));

例を見る (overlay.html)

クリックハンドリング

クリックを処理するには、GEvent.addListenerを呼び出し、'click'イベントを渡してください。

以下のコード例では、訪問者が地図上のどこかをクリックすると、その場所にマーカーを生成します。マーカーをクリックするとそのマーカーを地図から削除します。

var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

GEvent.addListener(map, 'click', function(overlay, point) {
  if (overlay) {
	map.removeOverlay(overlay);
  } else if (point) {
	map.addOverlay(new GMarker(point));
  }
});

例を見る (click.html)

マーーカー上の情報ウィンドウ表示

以下の例では、各マーカーのクリックイベントをリッスンすることによって、各マーカーの上に特注の情報ウィンドウを表示します。各マーカーの情報ウィンドウの内容をカスタマイズするため、関数のクロージャを活用しています。

// 地図の中心をPalo Altoにする。
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

// 与えられた数字を表示する情報ウィンドウを持つマーカーを生成する。
function createMarker(point, number) {
  var marker = new GMarker(point);

  // クリックされたらこのマーカーのインデックスを情報ウィンドウに表示する。
  var html = "Marker #<b>" + number + "</b>";
  GEvent.addListener(marker, 'click', function() {
	marker.openInfoWindowHtml(html);
  });

  return marker;
}

// デフォルトアイコンを使って10個のランダムなマーカーを地図の表示範囲に追加する。
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
  var point = new GPoint(bounds.minX + width * Math.random(),
						 bounds.minY + height * Math.random());
  var marker = createMarker(point, i + 1);
  map.addOverlay(marker);
}

例を見る (markerinfowindow.html)

アイコンの生成

以下の例は、一例としてGoogle Ride Finderの"mini"マーカーを使って、新しいマーカーのタイプを生成します。前景の画像を指定し、アイコンと地図および情報ウィンドウとアイコンを結びつけるポイント(位置)を指定する必要があります。

// "小さな"マーカーアイコンを生成する。
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);

// 地図の中心をPalo Altoにする。
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

// 与えられたpointに小さなマーカーの一つを生成する。
function createMarker(point) {
  var marker = new GMarker(point, icon);
  GEvent.addListener(marker, 'click', function() {
	marker.openInfoWindowHtml("You clicked me!");
  });
  return marker;
}

// 地図の表示範囲に10個のランダムなマーカーを追加する。
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
  var point = new GPoint(bounds.minX + width * Math.random(),
							bounds.minY + height * Math.random());
  var marker = createMarker(point);
  map.addOverlay(marker);
}

例を見る (icon.html)

アイコンクラスの使用

多くの場合、アイコンは異なる前景画像を持ちますが、形と影は同じです。この性質を実現する最も簡単な方法は、GIconクラスのコピーコンストラクタを使うことです。このコンストラクタは全ての属性を新しいカスタマイズできるようになった新しいアイコンにコピーします。以下の例はこのアイコンコピーテクニックを説明してみせます。

注意: この例はロカライズ性や拡張性はほとんどありません; Latin-1コードセットの文字に対応した一連の文字の画像が存在することに依存しています。

// 全てのマーカーの影やアイコンの大きさ等を指定する
// ベースアイコンを生成する。
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);

// 地図の中心をPalo Altoにする。
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

// 与えられたインデックス対応する文字を表示する
// 情報ウィンドウを持つマーカーを生成する。
function createMarker(point, index) {
  // 上のアイコンクラスを使ってpointに文字入りアイコンを生成する
  var letter = String.fromCharCode("A".charCodeAt(0) + index);
  var icon = new GIcon(baseIcon);
  icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
  var marker = new GMarker(point, icon);

  // クリックされたらこのマーカーのインデックスを情報ウィンドウに表示する。
  var html = "Marker <b>" + letter + "</b>";
  GEvent.addListener(marker, 'click', function() {
	marker.openInfoWindowHtml(html);
  });

  return marker;
}

// 地図の表示範囲に10個のランダムなマーカーを追加する。
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
  var point = new GPoint(bounds.minX + width * Math.random(),
  					   bounds.minY + height * Math.random());
  var marker = createMarker(point, i);
  map.addOverlay(marker);
}

例を見る (iconclass.html)

XMLと非同期RPC("AJAX")の利用

以下の例では、緯度と経度の座標のリストを含んだ静的なXMLファイル("data.xml")をダウンロードします。ダウンロードが完了すると、XMLを構文解析し、指定された各場所にマーカーを生成します。

注意: XMLファイルがHTMLコードを含む場合、必ず適切にHTMLをエンコードしてください。たとえば、XMLファイルの中のHTMLタグで現れる全ての"<"は"&lt;"に変更してください。そして、XMLファイルをダウンロードした後でJavaScriptコードでそれらを元に戻してください。(以下の例で使用するXMLファイルはHTMLを含んでいません。そのため、まったくエンコードやデコードをする必要はありません。)

// Palo Altoを地図の中心にする
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

// data.xmlのデータをダウンロードし、地図上にロードする。
// 期待するフォーマットは次のとおり:
// <markers>

//   <marker lat="37.441" lng="-122.141"/>
//   <marker lat="37.322" lng="-121.213"/>
// </markers>

var request = GXmlHttp.create();
request.open('GET', 'data.xml', true);
request.onreadystatechange = function() {
  if (request.readyState == 4) {
	var xmlDoc = request.responseXML;
	var markers = xmlDoc.documentElement.getElementsByTagName("marker");
	for (var i = 0; i < markers.length; i++) {
  	var point = new GPoint(parseFloat(markers[i].getAttribute("lng")),
						   parseFloat(markers[i].getAttribute("lat")));
  	var marker = new GMarker(point);
  	map.addOverlay(marker);
	}
  }
}
request.send(null);

例を見る (async.html). 外部の(またはあなた自身で生成した)data.xmlと名づけられたXMLデータファイルが必要です。

トラブルシューティング

コードがうまく動かない場合に、問題を突き止めるのに役立つかもしれないいくつかのアプローチがあります:

  • APIキーがファイルのあるディレクトリに対して有効であることを確かめてください。
  • 違うブラウザで見てください。
  • もしあれば、ブラウザのJavaScriptコンソールを調べてください。
  • タイプミスを探してください。JavaScriptは、大文字と小文字を区別する言語であることを思い出してください。
  • (誰かが最近似た質問をしていないか探してから)Maps APIディスカッショングループに投稿してください。問題のあるページのリンクも含めてください。
  • 他のフォーラムのために参考セクションを見てください。

その他のリソース

いくつかの追加のリソースがあります。これらのサイトはGoogleが認めたり差ピーとしているわけではないことに注意してください。

  • Mapkiは、Google Maps APIの情報を持つwikiです。FAQページを含みます。

API概要

GMapクラス

一つのGMapのインスタンスは、ページ上に単一の地図を表示します。このクラスのインスタンスを好きな数(ページ上に配置したい地図と同じ数)だけ生成することができます。新しい地図のインスタンスを生成するとき、地図が入るページ上の地図を名前をつけられた要素(通常div要素)を指定します。明示的にサイズを指定しなければ、地図の大きさは地図を入れる要素の大きさで決定されます。

GMapクラスは、地図の中心と縮尺を操作するメソッドと、(たとえばGMarkerGPolylineのインスタンスなどの)オーバーレイの追加と削除を行うメソッドを提供します。GMapクラスは、情報を表示するための「情報ウィンドウ("info winodw")」を開くメソッドも提供します; 詳しくは情報ウィンドウをご覧ください。

GMapの詳細については、GMapクラスのリファレンスをご覧ください。

イベント

イベントリスナを利用してアプリケーションに動的な要素を追加することができます。オブジェクトは多くの名前のついたイベントをエクスポートし、アプリケーションはこれらのイベントをスタティックメソッドGEvent.addListenerまたはGEvent.bindを使って「リッスン("listen")」することができます。たとえば、以下のコードの一部は、訪問者が地図のどこかをクリックするたびにアラートを表示します:

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
GEvent.addListener(map, 'click', function() {
  alert("地図がクリックされました。");
});

GEvent.addListenerは、3番目の引数として関数を受け取ります。これは、イベントハンドラの関数のクロージャの使用を促進します。クラスメソッドをイベントにバインドしたい場合は、GEvent.bindを使用します。例:

function onLoad() {

	function MyApplication() {
	  this.counter = 0;
	  this.map = new GMap(document.getElementById("map"));
	  GEvent.bind(this.map, 'click', this, this.onMapClick);
	}
	
	MyApplication.prototype.onMapClick = function() {
	  this.counter++;
	  alert("地図を" + this.counter + "回クリックしました");
	}

	var application = new MyApplication();
	application.map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

}

例を見る (bind.html)

情報ウィンドウ

各地図は一つの「情報ウィンドウ("inof window")」を持ちます。情報ウィンドウは、地図の上に浮かんでいるウィンドウにHTMLコンテンツを表示します。情報ウィンドウは漫画のふきだしに少しにています; 情報ウィンドウはコンテンツエリアと尖った部分をもち、尖った部分の先端は地図上の点を指しています。Google MapsやGoogle Localeでマーカーをクリックしたときに現れる情報ウィンドウを見たことがあるかもしれません。

与えられた地図一つにつき、2個以上の情報ウィンドウを表示させることはできませんが、必要に応じて情報ウィンドウを移動させたり内容を変更したりすることができます。

基本的な情報ウィンドウのメソッドは、openInfoWindowです。このメソッドは一つのポイントとHTML DOM要素を引数として受け取ります。情報ウィンドウは尖った部分の先端が地図上の与えられたポイントを指して現れ、コンテンツエリアにDOM要素を表示します。

openInfoWindowHtmlメソッドは似ていますが、2番目の引数としてDOM要素のかわりにHTML文字列を受け取ります。

同様に、openInfoWindowXsltは、ポイントとXML DOM要素、XSLT文書のURLを受け取ります。そして、XSLTをXMLに適用して情報ウィンドウの内容を生成します。このメソッドは、ユーザのブラウザがXSLTをまだダウンロードしていなければ、非同期でダウンロードします。

マーカーのようなオーバーレイの上に情報ウィンドウを表示させるために、3番目の任意引数: 指定したポイントと情報ウィンドウの先端との間のオフセットピクセルを指定することができます。つまり、マーカーの高さが10ピクセルなら、オフセットピクセルGSize(0, -10)を渡すでしょう。(詳しくは、GSizeクラスのリファレンスをご覧ください。)

GMarkerクラスは、アイコンのサイズと形に基づく問題を処理するopenInfoWindowメソッドを提供しているので、一般的にアプリケーションでアイコンオフセットの計算のことで気を揉む必要はありません。

オーバーレイは、緯度/経度座標に結び付けられた地図上のオブジェクトです。そのため、地図をドラッグしたときや投射図を変更したとき(たとえば地図モードから衛星写真モードに切り替えたとき)に移動します。

Google Maps APIは、2種類のオーバーレイを提供しています: 地図上のあいこん「マーカー」と、一連の点で構成される「ポリライン」です。

マーカーとアイコン

GMarkerのコンストラクタ は、引数としてアイコンとポイントを受け取り、"click"のようなイベントの小さな集合を提供します。マーカー生成の単純な例については、オーバーレイの例をご覧ください。

マーカーの生成の最も難しい部分はアイコンの指定です。Google Maps APIでは一つのアイコンは多くの異なる画像から構成されているので、アイコンの指定は複雑になっています。しかしながら、標準のアイコンでよければ、アイコンを指定せずにGMarkerを生成することができます。

アイコンは通常図案化された画鋲の形をしています。画鋲の先端はGMarkerのコンストラクタで指定された場所に現れます。

全てのアイコンは、(少なくとも)前景画像と影の画像を持っています。影は前景画像に対して(上向きで右方向に)45°の角度で生成され、影の画像の左下の角がアイコンの前景画像の左下にあわせられます。影の縁が地図の表面にあるように正しく見えるように、影はアルファ透過を持った24ビットのPNG画像であるべきです。

Google Maps APIが適切なサイズのイメージ要素を生成するために、GIconはアイコンを初期化する際にこれらの画像のサイズを指定することを要求します。これは、アイコンを指定するために必要な最小限のコードです(この場合、Google Mapsのアイコンが使用されます):

var icon = new GIcon();
icon.image = "http://www.google.com/mapfiles/marker.png";
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);

GIconクラスは、その他の7つの属性も提供します。これらの属性は、アイコンの最大限のブラウザ適合性と機能性を得たい場合にセットします。たとえば、imageMap属性はアイコン画像の不透明な部分の形を規定します。アイコンにこの属性をセットしない場合、Firefox/Mozillaではアイコン画像全体(透明部分を含む)がクリック可能になります。詳細はGIconクラスのリファレンスをご覧ください

ポリライン

GPolylineのコンストラクタは、引数としてポイントの配列を受け取り、与えられた順番で点を接続した一連の線分を生成します。線の色や太さ、不透明さも指定することができます。色はHTMLスタイルの16進数で指定してください; たとえば赤なら"#ff0000"を指定してください。GPolylineは、色の名前は理解できません。

以下のコードの断片は、2点間の10ピクセル幅の赤い線ポリラインを生成します:

var polyline = new GPolyline([new GPoint(-122.1419, 37.4419),
							  new GPoint(-122.1519, 37.4519)],
							  "#ff0000", 10);
map.addOverlay(polyline);

Internet Explorerでは、Google Mapsはポリラインの描画にVMLを使用します。そのため、VMLネームスペースと適切なCSSコードを必ずインクルードしてください(XHTMLとVMLを参照)。その他の全てのブラウザでは、Googleサーバに線の画像を要求して、その画像を地図の上に重ねます。地図がズームされたりドラッグされたときのような必要なときに更新します。

コントロール

パン(移動)やズーム、マップタイプの制御を地図に追加するには、addControlメソッドを使用してください。Google Maps APIは、地図で利用できる便利な組込みコントロールを備えています:

GLargeMapControl
Google Mapsで使われている大きなパン/ズームのコントロール
GSmallMapControl
Google Localで使われている小さめのパン/ズームのコントロール
GSmallZoomControl
Google Mapsで道案内のステップの表示用のミニ地図の拡大(blowup)ウィンドウで使用されている小さなズームのコントロール(パンのコントロールはありません)
GMapTypeControl
(地図と衛星写真のような)マップの種類を切り替えられるようにします

たとえば、Google Mapsのようなパン/ズームのコントロールを地図に追加するには、地図の初期化で以下の行をインクルードします:

map.addControl(new GLargeMapControl());

コントロールは、まさにGoogle Mapsのように地図の左上に取り付けられます。

XMLとRPC

Google Maps APIは、IE、Firefox、Safariで動作するXmlHttpRequestオブジェクトを生成するファクトリメソッドを提供します。たとえば:

var request = GXmlHttp.create();
request.open('GET', 'myfile.txt', true);
request.onreadystatechange = function() {
  if (request.readyState == 4) {
	alert(request.responseText);
  }
}
request.send(null);

XMLドキュメントをスタティックメソッドGXml.parseで解析することができます。このメソッドは唯一の引数としてXMLの文字列を受け取ります。このメソッドは全てのブラウザに対応しており、ブラウザが自前のXML解析機能を持たない場合は、JavaScriptのXMLパーサが使われます。この「代替」パーサの性能や正確性については保障されません。

Google Maps APIは、機能させるためにXMLやXmlHttpRequestの利用は必須ではなく、 純粋なJavaScript/DHTML APIであることに注意してください。

クラスリファレンス

GMap

一つのGMapにインスタンスは、 ページの一つの地図を表します。詳しくは上記の考察をご覧ください

コンストラクタ

コンストラクタ 説明
GMap(container, mapTypes?, width?, height?) 与えられたHTMLコンテナの中に新しい地図を生成します。代表的なコンテナはdiv要素です。異なったマップ種別が指定されなければ、デフォルトのマップ種別([G_MAP_TYPE, G_HYBRID_TYPE, G_SATELLITE_TYPE])が用いられます。同様に、幅と高さが明示的に指定されなければ地図の幅と高さはコンテナのサイズで決められます。

メソッド

設定
メソッド 説明
enableDragging() 動的なドラッグを有効にします(初期設定で有効)。
disableDragging() 動的なドラッグを無効にします。
draggingEnabled() 動的なドラッグが有効な場合、真を返します。
enableInfoWindow() この地図で情報ウィンドウを有効にします(初期設定で有効)。
disableInfoWindow() この地図で情報ウィンドウを無効にします。
infoWindowEnabled() この地図で情報ウィンドウが有効な場合、真を返します。
コントロール
addControl(control) 与えられたマップコントロールをこの地図に追加します。
removeControl(control) 与えられたマップコントロールをこの地図から削除します。
状態
メソッド 説明
getCenterLatLng() 地図の表示範囲の中心ポイントを緯度/経度座標系で返します。
getBoundsLatLng() 地図の表示範囲を緯度/経度で返します。
getSpanLatLng() 地図の表示範囲の幅と高さを緯度/経度の度数で返します。
getZoomLevel() 地図のズームレベルを整数で返します。
centerAtLatLng(latLng) 指定されたポイントを地図の中心にします。
recenterOrPanToLatLng(latLng) 指定されたポイントを地図の中心にします。指定されたポイントが現在の地図の表示範囲内であれば、滑らかにパンします。
zoomTo(zoomLevel) 整数で指定されたズームレベルにズームします。現在の地図種別において指定されたズームレベルが範囲外の場合、要求は無視されます。
centerAndZoom(latLng, zoomLevel) 地図の移動とセンタリングを同時に(Atomically)行います。上の例のように、地図の中心とズームを初期化するのに便利です。
getMapTypes() この地図でサポートされている地図の種類(現在G_MAP_TYPEG_HYBRID_TYPEG_SATELLITE_TYPE)を配列で返します.
getCurrentMapType() 現在使用されている地図の種類を返します(G_MAP_TYPEG_HYBRID_TYPEG_SATELLITE_TYPEのいずれか)。
setMapType(mapType) 指定された地図の種類に地図を切り替えます(G_MAP_TYPEG_HYBRID_TYPEG_SATELLITE_TYPEのいずれか)。
オーバーレイ
メソッド 説明
addOverlay(overlay) 指定されたオーバーレイオブジェクト(GMarkerGPolyline)を地図に追加します。
removeOverlay(overlay) 指定されたオーバーレイオブジェクトを地図から削除します。
clearOverlays() この地図から全てのオーバーレイオブジェクトを削除します。
情報ウィンドウ
メソッド 説明
openInfoWindow(latLng, htmlElem, pixelOffset?, onOpenFn?, onCloseFn?) 指定されたポイントに指定されたHTMLコンテンツを持つ情報ウィンドウを表示します。htmlElemは、HTMLの DOM要素です。pixelOffset (GSize)が指定された場合、情報ウィンドウを指定されたピクセル数だけずらします。これにより、情報ウィンドウをマーカーや他のオーバーレイの上に配置することができます。If onOpenFnが指定された場合、ウィンドウが表示されたときにその関数を呼び出します。onCloseFnが指定された場合、ウィンドウが閉じられたときにその関数を呼び出します。
openInfoWindowHtml(marker, htmlStr, pixelOffset?, onOpenFn?, onCloseFn?) HTMLのDOM要素の代わりにHTML文字列を受け取ること以外は、openInfoWindowと同じです。
openInfoWindowXslt(marker, xmlElem, xsltUri, pixelOffset?, onOpenFn?, onCloseFn?) 情報ウィンドウの内容を生成するためにXML要素とXSLTのURIを受け取ること以外は、openInfoWindow同じです。あるURIが最初に指定されたとき、そのURIにあるファイルはGXmlHttpでダウンロードされ、その後はキャッシュされます。
showMapBlowup(point, zoomLevel?, mapType?, pixelOffset?, onOpenFn?, onCloseFn?)) 指定されたGPointの拡大地図を表示します。zoomLevelmapTypeパラメータが指定されなかった場合、 ズームレベルは1、地図の種類は現在の種類を初期値とします。
closeInfoWindow() 情報ウィンドウが開いていれば閉じます。

イベント

イベント 引数 説明
click overlay, point ユーザが地図か地図上のオーバーレイをクリックしたときに引き起こされます。オーバーレイ上をクリックした場合、そのオーバーレイを引数としてイベントハンドラに送ります。そうでない場合、クリックされた地図上のポイントの緯度/経度を送ります。
move none 地図が動いたときに引き起こされます。このイベントはマップがドラッグされている間は持続的に引き起こされます。
movestart none 連続的なパン/ドラッグの移動の開始時に引き起こされます。このイベントは不連続(discretely)な移動の場合は、引き起こされません
moveend none 連続的/不連続な地図の移動の終了時に引き起こされます。このイベントは連続的なパンの終了時に1回引き起こされます。
zoom oldZoomLevel, newZoomLevel 地図のズームレベルが変更された後に引き起こされます。
maptypechanged none 地図の種類(地図, 混合、衛星写真のいずれか)が変更された後に引き起こされます。
infowindowopen none 情報ウィンドウが表示された後に引き起こされます。
infowindowclose none 情報ウィンドウが閉じられた後に引き起こされます。
addoverlay overlay 地図にオーバーレイが追加された後に引き起こされます。
removeoverlay overlay 地図からオーバーレイが削除された後に引き起こされます。clearOverlaysが呼ばれた場合は引き起こされません—以下のclearoverlaysイベントをご覧ください。
clearoverlays none 地図から全てのオーバーレイが削除された後に引き起こされます。

GMarker

GMarkerは、地図上の一点のアイコンを表示するオーバーレイの一種です。コンストラクタはGIconのインスタンスとそれが表示されるポイントを受け取ります。GIconのインスタンスは複数のマーカーで共有することができます。GMarkerGoogle Mapsのハックで普通に行われているようにマーカー上に情報ウィンドウを開くためのいくつかの便利なメソッドも含んでいます。

Constructor

コンストラクタ 説明
GMarker(point, icon?) 指定されたポイントに指定されたアイコンのマーカーを生成します。アイコンが指定されなかった場合、デフォルトのGoogle Maosのアイコンを使用します。

メソッド

メソッド 説明
openInfoWindow(htmlElem) このマーカの上に指定されたHTMLコンテンツを持つ情報ウィンドウを開きます。htmlElemはのHTMLのDOM要素です。
openInfoWindowHtml(htmlStr) HTMLのDOM要素の代わりにHTML文字列を受け取ること以外は、openInfoWindowと同じです。
openInfoWindowXslt(xmlElem, xsltUri) 情報ウィンドウの内容を生成するために、XML要素とXSLTドキュメントのURIを受け取る以外は、openInfoWindowと同じです。あるURIが最初に指定されたとき、そのURIのファイルがGXmlHttpでダウンロードされ、その後はキャッシュされます。
showMapBlowup(zoomLevel?, mapType?) このマーカーの上に拡大地図を表示します。zoomLevelmapTypeパラメータが指定されなかった場合は、ずー群れ得るは1を、地図の種類は現在の種類を初期値として使用します。

イベント

イベント 引数 説明
click none このマーカーをクリックしたときに引き起こされます。
infowindowopen none 上記のメソッドの一つでこのマーカの上に情報ウィンドウが開かれたときに引き起こされます。
infowindowclose none このマーカー上の情報ウィンドウが閉じられたときに引き起こされます。

GPolyline

ポリラインは、地図上のベクトルポリラインオーバーレイを表します。ポリラインは、可能であればブラウザのベクトル描画機能で描画されます。そうでなければGoogleサーバのイメージオーバーレイで描画されます。

コンストラクタ

コンストラクタ 説明
GPolyline(points, color?, weight?, opacity?) 指定された緯度/経度の点の配列からポリラインを構成します。colorは("#0000ff"のような)16進のHTMLカラー, weightは線の幅のピクセル数を表す整数、opacityは0から1の不動小数点数です。

GIcon

アイコンは地図上のマーカーを表示するために使われる画像を指定します。ブラウザ間の互換性の理由で、アイコンの指定は実はものすごく複雑です。詳しくは上記の考察をご覧ください。独自のアイコンの指定を望まなければ、デフォルトのGoogle Mapsのアイコンを使用できることに注意してください。

アイコンを表示する前に、(少なくとも)imageshadowImageiconSizeshadowSizeiconAnchorの属性を指定しなければなりません。情報ウィンドウを使用する場合、アイコンのinfoWindowAnchor属性も指定する必要があります。

コンストラクタ

コンストラクタ 説明
GIcon(copy?) 新しいアイコンを生成し、指定されていれば指定のアイコンの属性をコピーします。

属性

属性 説明
image アイコンの前景画像のURL
shadow アイコンの影の画像のURL
iconSize アイコンの前景画像のピクセルサイズ
shadowSize 影の画像のピクセルサイズ
iconAnchor 地図にこのアイコンを結びつける際の、アイコン画像の左上の角からの相対ピクセル座標
infoWindowAnchor このアイコンに情報ウインドウを結びつける際の、アイコン画像の左上の角からの相対ピクセル座標
printImage 地図を印刷する際に使用するアイコンの前景画像のURL。メインのアイコン画像と同じ大きさであるべきです。
mozPrintImage Firefox/Mozillaで地図を印刷する際に使用するアイコンの前景画像のURL。メインのアイコン画像と同じ大きさであるべきです。
printShadow 地図を印刷する際に使用する影の画像のurl。ほとんどのブラウザはPNG画像を印刷できないので、GIF画像であるべきです。
transparent IEのクリックイベントを捕らるのに使われるアイコンの前景画像の疑似透過バージョンのURL。この画像は、メインアイコン画像の1%の不透明性を持った24ビットPNGバージョンで、メインアイコンと同じ形と大きさであるべきです。
imageMap IE以外のブラウザで、アイコン画像のクリッカブル部分を指定するのに使われる、イメージマップの座標を表す整数の配列。

GEvent

全てのイベントの登録と誘発(triggering)は、GEventクラスで処理されます。GEventクラスの全てのメソッドはスタティックメソッドです; これらのメソッドは(new Event()).bind(...)の代わりにGEvent.bind(...)フォームを使って呼び出すべきです。

メソッド 説明
addListener(source, eventName, listenerFn) 指定された発信元インタフェースで指定されたイベントが引き起こされたとき、指定したlistenerFn関数を呼び出します。removeListenerで使用できる不透明な(opaque)リスナトークンを返します。
removeListener(listener) 指定されたリスナを削除します。リスナはaddListenerによって返されるリスナトークンで指定します。
clearListeners(source, eventName) 指定された発信源から指定されたイベントの全てのリスナを削除します
trigger(source, eventName, args...) 指定された発信源で指定された引数のリストを持つ指定されたイベントを引き起こします。
bind(source, eventName, object, method) 指定されたオブジェクトのメソッドを指定された発信源のイベントにバインドします。指定されたイベントが引き起こされた場合、指定されたメソッドのobjectthisとして呼び出されます。例: GEvent.bind(map, 'move', this, this.onMapMove).

GXmlHttp

GXmlHttpクラスは、ブラウザ間で互換性のあるXmlHttpRequestインスタンスを生成するためのファクトリメソッドを提供します。

スタティックメソッド

メソッド 説明
create() 新しいXmlHttpRequestインスタンスを構成するファクトリメソッド

GXml

GXmlクラスは、XML文字列を解析するスタティックメソッドを提供します。パーサーは任意のブラウザで動作します。ただし、Webブラウザの自前のパーサーが無ければ、デフォルト設定によりJavaScriptのXMLパーサーが代わりに使用されます。このデフォルトのJavaScriptのXMLパーサーは本当に遅く、ブラウザのJavaScriptの実装に依存します。

スタティックメソッド

メソッド 説明
parse(xmlStr) 指定されたXML文字列を解析し、XMLのDOMを返します
value(xmlNode) 指定されたXMLの要素又はノードの原文の内容を返します。XML要素内からテキストノードを取り出すのに便利です。

GXslt

GXsltクラスは、ブラウザに依存しない方法でXSLTをXMLに適用するためのファクトリメソッドを提供します。クラスは任意のブラウザで動作します。ただし、Webブラウザの自前のXSLTプロセッサが無い場合は、デフォルト設定によりJavaScriptによるXSLTの実装が代わりに使用されます。このデフォルトのJavaScriptのXMLパーサーは本当に遅く、ブラウザのJavaScriptの実装に依存します。

スタティックメソッド

メソッド 説明
create(xsltXmlDoc) 指定されたXMLのDOMからGXsltインスタンスを返します。XMLのDOMはXSLTドキュメントであるべきです。

メソッド

メソッド 説明
transformToHtml(xmlDoc, htmlContainer) 指定されたXMLドキュメントをこのXSLTで変換します。結果のHTMLは指定されたHTMLのDOM要素コンテナにセットされます。

GPoint

GPointを一つの2次元座標を表します。GPointが緯度/経度を表す場合、x経度y緯度の十進法表現です。

コンストラクタ

コンストラクタ 説明
GPoint(x, y) 指定された座標値で新しいポイントを生成します。

属性

属性y 説明
x 点のx(または水平)座標。
y 点のy(又は垂直)座標。

GSize

GSizeは、2次元の寸法測定(size measurement)を表します。GSizeが緯度/経度の範囲を表す場合、widthは経度の角度の値、heightは緯度の角度の値です。

コンストラクタ

コンストラクタ 説明
GSize(width, height) 指定された測定値で新しいサイズを生成します。

属性

属性 説明
width 幅の測定値。
height 高さの測定値。

GBounds

GBoundsは2次元のバウンディングボックスを表します。GBoundsが緯度経度座標系で表される場合、x座標は経度を表し、y座標は緯度を表します。緯度/経度の境界が国債費付け変更線を横断する場合、「最小の」座標は2つの座標の数学的な最小座標ではなく、左上の座標を参照します。

コンストラクタ

コンストラクタ 説明
GBounds(minX, minY, maxX, maxY) 指定した座標で新しい教会を生成します。

属性

属性 説明
minX 境界の左上の角のx座標。
minY 境界の左上の角のy座標。
maxX 境界の右下の角のx座標。
maxY 境界の右下の角のy座標。
o ooO    
©2006 Google - Google Home - About Google - Google Maps