| Google Maps API ドキュメント |
| |
|
|
Google Maps API
Sign up for an API key API Documentation API Terms of Use API Blog API Discussion Group
|
 |
序論対象者この資料は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( <script src="http://maps.google.com/maps?file=api&v=1&key=abcdefg" type="text/javascript"> </script> Google Maps APIによってエクスポートされるメインクラスは 地図インスタンスを操作したりオーバーレイを追加するメソッドは以下で詳しく述べます。 ブラウザの適合性Google Maps APIは、Google Localサイトと同じブラウザをサポートしています。Google Localのサポートブラウザのリストをご覧ください。
適合性の無いブラウザでは、異なるアプリケーションは異なる動作を要求するので、このAPIは互換性をチェックするためのグローバルメソッド( この資料では互換性をチェックする例(上記の最初の例を除く)や古いブラウザ用のエラーメッセージを表示する例ははありません。もちろん実際のアプリケーションは適合性のないブラウザにたいしてより親切するべきですが、例を読みやすくするためにそのようなチェックは省略します。 いくつかのブラウザは、JavaScriptに関して特有の癖を持っているかもしれないことに注意してください。たとえば、IEは表の中のJavaScriptを許しません。 XHTMLとVML地図を含むページでは標準に準拠したXHTMLを用いることを推奨します。ブラウザはページの最上部にXHTML (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 新しいバージョンがリリースされた後、約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);
地図の移動とアニメーション
以下の例は地図を表示し、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);
コントロールの地図への追加
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
イベントリスナイベントリスナを登録するには、 この例は、HTMLの本文中の緯度と経度を表示する場所を表す"message"と名づけられた
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);
情報ウィンドウのオープン情報ウィンドウを生成するには、 主としてマーカー上に情報ウィンドウを配置するでしょうが、地図上ならどこにでも情報ウィンドウを配置することができます。
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
map.openInfoWindow(map.getCenterLatLng(),
document.createTextNode("Hello, world"));
地図オーバーレイマーカーを地図に追加するには、最初にGPointを生成します; それからそのポイントを新しいGMarkeの位置として与えます; そしてマーカーを ポリラインを地図に追加するには、最初に点の配列を生成します; それからこれらの点を用いて新しいGPolylineを生成します; そしてポリラインを 以下の例のコードは、地図のオーバーレイの使い方を説明するために、ランダムなマーカーとランダムなポリラインを生成します。 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));
クリックハンドリングクリックを処理するには、 以下のコード例では、訪問者が地図上のどこかをクリックすると、その場所にマーカーを生成します。マーカーをクリックするとそのマーカーを地図から削除します。 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));
}
});
マーーカー上の情報ウィンドウ表示以下の例では、各マーカーのクリックイベントをリッスンすることによって、各マーカーの上に特注の情報ウィンドウを表示します。各マーカーの情報ウィンドウの内容をカスタマイズするため、関数のクロージャを活用しています。
// 地図の中心を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);
}
アイコンの生成以下の例は、一例として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);
}
アイコンクラスの使用多くの場合、アイコンは異なる前景画像を持ちますが、形と影は同じです。この性質を実現する最も簡単な方法は、 注意: この例はロカライズ性や拡張性はほとんどありません; 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);
}
XMLと非同期RPC("AJAX")の利用以下の例では、緯度と経度の座標のリストを含んだ静的なXMLファイル("data.xml")をダウンロードします。ダウンロードが完了すると、XMLを構文解析し、指定された各場所にマーカーを生成します。 注意: XMLファイルがHTMLコードを含む場合、必ず適切にHTMLをエンコードしてください。たとえば、XMLファイルの中のHTMLタグで現れる全ての"<"は"<"に変更してください。そして、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データファイルが必要です。 トラブルシューティングコードがうまく動かない場合に、問題を突き止めるのに役立つかもしれないいくつかのアプローチがあります:
その他のリソースいくつかの追加のリソースがあります。これらのサイトはGoogleが認めたり差ピーとしているわけではないことに注意してください。 API概要
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| コンストラクタ | 説明 |
|---|---|
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_TYPEと G_HYBRID_TYPEとG_SATELLITE_TYPE)を配列で返します. |
getCurrentMapType() |
現在使用されている地図の種類を返します(G_MAP_TYPEかG_HYBRID_TYPEかG_SATELLITE_TYPEのいずれか)。 |
setMapType(mapType) |
指定された地図の種類に地図を切り替えます(G_MAP_TYPEかG_HYBRID_TYPEかG_SATELLITE_TYPEのいずれか)。 |
| メソッド | 説明 |
|---|---|
addOverlay(overlay) |
指定されたオーバーレイオブジェクト(GMarkerかGPolyline)を地図に追加します。 |
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の拡大地図を表示します。zoomLevelとmapTypeパラメータが指定されなかった場合、 ズームレベルは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 | 地図から全てのオーバーレイが削除された後に引き起こされます。 |
GMarkerGMarkerは、地図上の一点のアイコンを表示するオーバーレイの一種です。コンストラクタはGIconのインスタンスとそれが表示されるポイントを受け取ります。GIconのインスタンスは複数のマーカーで共有することができます。GMarkerGoogle Mapsのハックで普通に行われているようにマーカー上に情報ウィンドウを開くためのいくつかの便利なメソッドも含んでいます。
| コンストラクタ | 説明 |
|---|---|
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?) |
このマーカーの上に拡大地図を表示します。zoomLevelとmapTypeパラメータが指定されなかった場合は、ずー群れ得るは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のアイコンを使用できることに注意してください。
アイコンを表示する前に、(少なくとも)imageとshadowImage、iconSize、 shadowSize、iconAnchorの属性を指定しなければなりません。情報ウィンドウを使用する場合、アイコンの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) |
指定されたオブジェクトのメソッドを指定された発信源のイベントにバインドします。指定されたイベントが引き起こされた場合、指定されたメソッドのobjectはthisとして呼び出されます。例: GEvent.bind(map, 'move', this, this.onMapMove). |
GXmlHttpGXmlHttpクラスは、ブラウザ間で互換性のあるXmlHttpRequestインスタンスを生成するためのファクトリメソッドを提供します。
| メソッド | 説明 |
|---|---|
create() |
新しいXmlHttpRequestインスタンスを構成するファクトリメソッド |
GXmlGXmlクラスは、XML文字列を解析するスタティックメソッドを提供します。パーサーは任意のブラウザで動作します。ただし、Webブラウザの自前のパーサーが無ければ、デフォルト設定によりJavaScriptのXMLパーサーが代わりに使用されます。このデフォルトのJavaScriptのXMLパーサーは本当に遅く、ブラウザのJavaScriptの実装に依存します。
| メソッド | 説明 |
|---|---|
parse(xmlStr) |
指定されたXML文字列を解析し、XMLのDOMを返します |
value(xmlNode) |
指定されたXMLの要素又はノードの原文の内容を返します。XML要素内からテキストノードを取り出すのに便利です。 |
GXsltGXsltクラスは、ブラウザに依存しない方法で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要素コンテナにセットされます。 |
GPointGPointを一つの2次元座標を表します。GPointが緯度/経度を表す場合、xは経度、yは緯度の十進法表現です。
| コンストラクタ | 説明 |
|---|---|
GPoint(x, y) |
指定された座標値で新しいポイントを生成します。 |
| 属性y | 説明 |
|---|---|
x |
点のx(または水平)座標。 |
y |
点のy(又は垂直)座標。 |
GSizeGSizeは、2次元の寸法測定(size measurement)を表します。GSizeが緯度/経度の範囲を表す場合、widthは経度の角度の値、heightは緯度の角度の値です。
| コンストラクタ | 説明 |
|---|---|
GSize(width, height) |
指定された測定値で新しいサイズを生成します。 |
| 属性 | 説明 |
|---|---|
width |
幅の測定値。 |
height |
高さの測定値。 |
GBoundsGBoundsは2次元のバウンディングボックスを表します。GBoundsが緯度経度座標系で表される場合、x座標は経度を表し、y座標は緯度を表します。緯度/経度の境界が国債費付け変更線を横断する場合、「最小の」座標は2つの座標の数学的な最小座標ではなく、左上の座標を参照します。
| コンストラクタ | 説明 |
|---|---|
GBounds(minX, minY, maxX, maxY) |
指定した座標で新しい教会を生成します。 |
| 属性 | 説明 |
|---|---|
minX |
境界の左上の角のx座標。 |
minY |
境界の左上の角のy座標。 |
maxX |
境界の右下の角のx座標。 |
maxY |
境界の右下の角のy座標。 |
