解説 : Google Maps APIs

解説2. Google Maps APIs

Ajaxメニューへメインメニューへ

"Google Maps"のAPIの解説

オブジェクト指向を知らない人でもわかるような表現になるように気をつけてみました。
各用語を日本語にする際に、分かりやすくする為に、公式のAPI Documentの用語から若干変更しました。
「サンプルのコードを表示する」ボタンはJavaScriptを有効にしていないと動作しません。

意外と忘れがちな Google Maps API 使用時の注意点

Google Maps APIはライセンスを取得しなければ使用できません。（無料）
Google Maps APIは、UTF-8形式でデータを扱う為、ページの文字コードはUTF-8にすべきです。
マップを表示するページは、XHTML標準に従うように作成すると良いです。
さらに、IE で GPolyline を使用する場合は、ページに VML 名前空間を組み込む必要があります。
なんだか難しいように思えるかもしれませんが、毎回ページの最初を以下の使用例のようにするだけです。
そのままコピーして使用すると良いです。
現時点(2005/9)では、Opera は Xslt をサポートしていない為、openInfoWindowXslt 及び GXslt は動作しません。

使用例

<!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"/>
    <style type="text/css">
    v\:* {
      behavior:url(#default#VML);
    }
    </style>
    <script src="http://maps.google.com/maps?file=api&v=1&key=ここにKeyを入力" type="text/javascript"></script>
  </head>

GMap
- メソッド
GMarker
- メソッド
- イベント
GPolyline
GIcon
- プロパティ
GEvent
- 静的メソッド
GXmlHttp
- 静的メソッド
GXml
- 静的メソッド
GXslt
- 静的メソッド
- メソッド
GPoint
- プロパティ
GSize
- プロパティ
GBounds
- プロパティ

API 解説

`GMap`

GMapを呼び出すことにより、１つのマップが表示されます。
複数のマップを表示するには、GMapを複数呼び出せば良い。

GMap(container[, mapTypes[, width, height]])

解説

新しいマップを生成する。
container に、HTMLの<div>タグを与えることにより、その<div>タグの部分にマップが表示される。
mapTypes には、
[G_MAP_TYPE], [G_SATELLITE_TYPE], [G_HYBRID_TYPE]のいずれかを設定出来る。（[]カッコは必要）
但し、設定したマップタイプ以外に変更出来なくなるので、あまり使う必要はないかも。
デフォルトは[G_MAP_TYPE]
width 及び height は、マップの表示サイズではなくて、マップの基準サイズになる。
設定した範囲内（単位はpx）の中心地点がマップの中心になる。
デフォルトは、表示する<div>領域の中心になる。

使用例サンプル

var map = new GMap(document.getElementById("map"), [G_MAP_TYPE], "500", "400");

メソッド

設定情報

enableDragging()

解説

ドラッグでのマップ移動を可能にする。（デフォルト）

使用例サンプル

map.enableDragging();

disableDragging()

解説

ドラッグでのマップ移動を禁止する。

使用例サンプル

map.disableDragging();

draggingEnabled()

解説

ドラッグ可能状態だとtrue、ドラッグ禁止状態だとfalse が返ってくる。

使用例サンプル

window.alert(map.draggingEnabled());

enableInfoWindow()

解説

マップのサブウィンドゥ表示を可能にする。（デフォルト）

使用例サンプル

map.enableInfoWindow();

disableInfoWindow()

解説

マップのサブウィンドゥ表示を禁止する。

使用例サンプル

map.disableInfoWindow();

infoWindowEnabled()

解説

サブウィンドゥ表示可能状態だとtrue、サブウィンドゥ表示禁止状態だとfalse が返ってくる。

使用例サンプル

window.alert(map.infoWindowEnabled());

マップコントローラ

addControl(control)

解説

マップにコントローラを追加する。追加できるコントローラは以下。
GLargeMapControl : 上下左右のスクロール、初期位置へ移動、拡大・縮小のボタンとバー
GSmallMapControl : 上下左右のスクロール、拡大・縮小ボタン
GSmallZoomControl : 拡大・縮小ボタンのみ
GMapTypeControl : マップタイプを変更するボタン
複数表示可能だが、GMapTypeControl以外は表示位置が同じなので、重なって表示される。
GLargeMapControl、GSmallMapControl、GSmallZoomControlの内の１つを追加するのが良い。

使用例サンプル

map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

removeControl(control)

解説

マップのコントローラを削除する。

使用例サンプル

var ctrl = new GLargeMapControl();
map.addControl(ctrl);
map.removeControl(ctrl);

マップステータス

getCenterLatLng()

解説

マップの中心座標を取得する。（参照 : GPoint）

使用例サンプル

var point = map.getCenterLatLng();
window.alert(point.x);
window.alert(point.y);

getBoundsLatLng()

解説

マップの左上及び右下の座標を取得する。（参照 : GBounds）

使用例サンプル

var point = map.getBoundsLatLng();
window.alert(point.minX);
window.alert(point.minY);

getSpanLatLng()

解説

マップの幅・高さを取得する。（参照 : GSize）

使用例サンプル

var point = map.getSpanLatLng();
window.alert(point.width);
window.alert(point.height);

getZoomLevel()

解説

マップのズームレベルを取得する。

使用例サンプル

window.alert(map.getZoomLevel());

centerAtLatLng(latLng)

解説

マップの中心座標を設定する。latLng はGPoint型。（参照 : GPoint）

使用例サンプル

map.centerAtLatLng(new GPoint(132.46151447296142, 34.39951809672059));

recenterOrPanToLatLng(latLng)

解説

マップの中心を指定した座標に変更する（移動する）。latLng はGPoint型。（参照 : GPoint）

使用例サンプル

map.recenterOrPanToLatLng(new GPoint(132.47151447296142, 34.40951809672059));

zoomTo(zoomLevel)

解説

マップのズームレベルを設定する。zoomLevel は、0 ～ 17 の数値で、小さいほど拡大して表示される。

使用例サンプル

map.zoomTo(5);

centerAndZoom(latLng, zoomLevel)

解説

マップの中心とズームレベルを同時に設定する。
latLng はGPoint型。（参照 : GPoint）
zoomLevel は、0 ～ 17 の数値で、小さいほど拡大して表示される。

使用例サンプル

map.centerAndZoom(new GPoint(132.46151447296142, 34.39951809672059), 1);

getMapTypes()

解説

マップで使用できるマップタイプ（[G_MAP_TYPE], [G_SATELLITE_TYPE], [G_HYBRID_TYPE]など）を配列で取得する。

使用例サンプル

var mtype = map.getMapTypes();

getCurrentMapType()

解説

現在のマップタイプを取得する。

使用例サンプル

var cmtype = map.getCurrentMapType();

setMapType(mapType)

解説

マップタイプを設定・変更する。 mapTypes には、
G_MAP_TYPE, G_SATELLITE_TYPE, G_HYBRID_TYPEのいずれかを設定出来る。
（GMapの時とは異なり、[]カッコは不要）

使用例サンプル

map.setMapType(G_HYBRID_TYPE);

オーバーレイ

addOverlay(overlay)

解説

マップに、マーカー（GMarker）かライン（GPolyline）を追加する。

使用例サンプル

map.addOverlay(new GMarker(new GPoint(132.46151447296142, 34.39951809672059)));

removeOverlay(overlay)

解説

マップ内の指定したマーカー（GMarker）かライン（GPolyline）を削除する。

使用例サンプル

var marker = new GMarker(new GPoint(132.46151447296142, 34.39951809672059));
map.addOverlay(marker);
map.removeOverlay(marker);

clearOverlays()

解説

マップ内の全てのマーカー（GMarker）及びライン（GPolyline）を削除する。

使用例サンプル

map.clearOverlays();

サブウィンドゥ

openInfoWindow(latLng, htmlElem[, pixelOffset[, onOpenFn[, onCloseFn]]])

解説

サブウィンドゥを表示する。
latLng はGPoint型。（参照 : GPoint）
htmlElem はHTML DOMで記述。（ちょっと説明し難いです・・・）
pixelOffset はGSize形式。latLng からpixelOffset で指定した位置だけ移動させることが出来ます。（参照 : GSize）
onOpenFn で、サブウィンドウを表示した時に動作する処理を、
onCloseFn で、サブウィンドウを閉じた時に動作する処理を設定出来ます。

使用例サンプル

map.openInfoWindow(
   new GPoint(132.46151447296142, 34.39951809672059), 
   document.createTextNode("広島城"), 
   new GSize(50, 50), 
   function() {window.alert("InfoWindowオープン");}, 
   function() {window.alert("InfoWindowクローズ");});

openInfoWindowHtml(latLng, htmlStr[, pixelOffset[, onOpenFn[, onCloseFn]]])

解説

サブウィンドゥを表示する。
latLng はGPoint型。（参照 : GPoint）
htmlStr はHTMLで記述。
pixelOffset はGSize形式。latLng からpixelOffset で指定した位置だけ移動させることが出来ます。（参照 : GSize）
onOpenFn で、サブウィンドウを表示した時に動作する処理を、
onCloseFn で、サブウィンドウを閉じた時に動作する処理を設定出来ます。

使用例サンプル

map.openInfoWindowHtml(
   new GPoint(132.46151447296142, 34.39951809672059), 
   "<b style='color: red;'>広島城</b>", 
   new GSize(-50, -50), 
   function() {window.alert("InfoWindowHtmlオープン");}, 
   function() {window.alert("InfoWindowHtmlクローズ");});

openInfoWindowXslt(latLng, xmlElem, xsltUri[, pixelOffset[, onOpenFn[, onCloseFn]]])

解説

サブウィンドゥを表示する。
latLng はGPoint型。（参照 : GPoint）
xmlElem はXML DOMドキュメント。文字列は不可。GXmlHttp を利用すると便利かも。
xsltUri には xmlElem に適用するXSLTのURI(URL)を記述。
pixelOffset はGSize形式。latLng からpixelOffset で指定した位置だけ移動させることが出来ます。（参照 : GSize）
onOpenFn で、サブウィンドウを表示した時に動作する処理を、
onCloseFn で、サブウィンドウを閉じた時に動作する処理を設定出来ます。

使用例サンプル

var request = GXmlHttp.create();
request.open("GET", "sample001.xml");
request.onreadystatechange = function() {
  if (request.readyState == 4) {
    var xmlDoc = request.responseXML;
    map.openInfoWindowXslt(
       new GPoint(132.46151447296142, 34.39951809672059), 
       xmlDoc, "sample001.xsl", 
       new GSize(100, -50), 
       function() {window.alert("InfoWindowXsltオープン");}, 
       function() {window.alert("InfoWindowXsltクローズ");});
  }
}
request.send(null);

showMapBlowup(latLng[, zoomLevel[, mapType[, pixelOffset[, onOpenFn[, onCloseFn]]]]]))

解説

サブマップウィンドゥを表示する。
latLng はGPoint型。（参照 : GPoint）
zoomLevel は、1 ～ 17 の数値で、小さいほど拡大して表示される。（ 0 は出来ない。バグかな？）
mapTypes には、G_MAP_TYPE, G_SATELLITE_TYPE, G_HYBRID_TYPEのいずれかを設定出来る。
pixelOffset はGSize形式。latLng からpixelOffset で指定した位置だけ移動させることが出来ます。（参照 : GSize）
onOpenFn で、サブウィンドウを表示した時に動作する処理を、
onCloseFn で、サブウィンドウを閉じた時に動作する処理を設定出来ます。

使用例サンプル

map.showMapBlowup(
   new GPoint(132.46151447296142, 34.39951809672059), 
   9, G_SATELLITE_TYPE, new GSize(100, -50), 
   function() {window.alert("showMapBlowupオープン");}, 
   function() {window.alert("showMapBlowupクローズ");});

closeInfoWindow()

解説

サブウィンドゥを閉じる

使用例サンプル

map.closeInfoWindow();

イベント

click

イベントで取得できる値

overlay , point

解説

マップやオーバーレイをクリックすると動作するイベント
クリックした位置の座標やクリックしたオーバーレイを取得出来る。

使用例サンプル

GEvent.addListener(map, 'click', function(overlay, point) {
  if (overlay) {
    window.alert('マーカー削除');
    map.removeOverlay(overlay);
  } else if (point) {
    window.alert('クリックした座標 : ' + point.x + ' , ' + point.y);
  }
});

move

解説

マップが動いている時に動作するイベント

使用例サンプル

GEvent.addListener(map, "move", function() {
  var center = map.getCenterLatLng();
  var latLngStr = '(' + center.x + ', ' + center.y + ')';
  document.getElementById("message").innerHTML = latLngStr;
});

movestart

解説

マップが動き始めた時に動作するイベント

使用例サンプル

GEvent.addListener(map, "movestart", function() {
  var center = map.getCenterLatLng();
  var latLngStr = '(' + center.x + ', ' + center.y + ')';
  document.getElementById("message").innerHTML = latLngStr;
});

moveend

解説

マップが動き終えた時に動作するイベント

使用例サンプル

GEvent.addListener(map, "moveend", function() {
  var center = map.getCenterLatLng();
  var latLngStr = '(' + center.x + ', ' + center.y + ')';
  document.getElementById("message").innerHTML = latLngStr;
});

zoom

イベントで取得できる値

oldZoomLevel , newZoomLevel

解説

マップのズームレベルが変わった後で動作するイベント。変更前と変更後のズームレベルを取得する。

使用例サンプル

GEvent.addListener(map, 'zoom', function(oldZoomLevel, newZoomLevel) {
  window.alert('前のズームレベル : ' + oldZoomLevel);
  window.alert('今のズームレベル : ' + newZoomLevel);
});

maptypechanged

解説

マップタイプが変わった後で動作するイベント。

使用例サンプル

GEvent.addListener(map, "maptypechanged", function() {
  map.addControl(new GMapTypeControl());
  window.alert("マップタイプが変わりました");
});

infowindowopen

解説

サブウィンドゥが開いた後で動作するイベント。

使用例サンプル

GEvent.addListener(map, "infowindowopen", function() {
  window.alert("サブウィンドゥが開きました");
});

infowindowclose

解説

サブウィンドゥを閉じた後で動作するイベント。

使用例サンプル

GEvent.addListener(map, "infowindowclose", function() {
  window.alert("サブウィンドゥが閉じました");
});

addoverlay

イベントで取得できる値

overlay

解説

オーバーレイが追加された後で動作するイベント。そのオーバーレイを取得する。

使用例サンプル

GEvent.addListener(map, "addoverlay", function(overlay) {
  overlay.openInfoWindowHtml("オーバーレイが追加されました");
});

removeoverlay

イベントで取得できる値

overlay

解説

オーバーレイが削除された後で動作するイベント。そのオーバーレイを取得する。
但し、clearOverlays()で削除された場合は動作しない。

使用例サンプル

GEvent.addListener(map, "removeoverlay", function(overlay) {
  window.setTimeout(function() {map.addOverlay(overlay);}, 5000);
});

clearoverlays

解説

オーバーレイをクリアした後で動作するイベント。

使用例サンプル

GEvent.addListener(map, "clearoverlays", function() {
  window.alert("消えました");
});

`GMarker`

GMarker は、オーバーレイの一つで、一つの座標に一つのアイコンが表示されます。
また、アイコンを変更することやサブウィンドゥを表示することも出来ます。

GMarker(point[, icon])

解説

point で指定した座標ににマーカーを表示する。
iconで、マーカーアイコンを指定出来る。（参照 : GIcon）
指定しない場合は、Google Maps のデフォルトのアイコンになる。

使用例サンプル

var icon = new GIcon();
icon.image = "http://ponpon-village.net/ajax/img/hiyo05.gif";
icon.iconSize = new GSize(25, 30);
icon.iconAnchor = new GPoint(13.5, 40);
var marker = new GMarker(new GPoint(132.46151447296142, 34.39951809672059), icon);
map.addOverlay(marker);

メソッド

openInfoWindow(htmlElem)

解説

マーカーに関連付けられたサブウィンドゥを表示する。
htmlElem はHTML DOMで記述。（ちょっと説明し難いです・・・）

使用例サンプル

var marker = new GMarker(new GPoint(132.46151447296142, 34.39951809672059));
map.addOverlay(marker);
marker.openInfoWindow(document.createTextNode("広島城"));

openInfoWindowHtml(htmlStr)

解説

マーカーに関連付けられたサブウィンドゥを表示する。
htmlStr はHTMLで記述。

使用例サンプル

var marker = new GMarker(new GPoint(132.46151447296142, 34.39951809672059));
map.addOverlay(marker);
marker.openInfoWindowHtml("広島城");

openInfoWindowXslt(xmlElem, xsltUri)

解説

マーカーに関連付けられたサブウィンドゥを表示する。
xmlElem はXML DOMドキュメント。文字列は不可。GXmlHttp を利用すると便利かも。
xsltUri には xmlElem に適用するXSLTのURI(URL)を記述。

使用例サンプル

var marker = new GMarker(new GPoint(132.46151447296142, 34.39951809672059));
map.addOverlay(marker);
var request = GXmlHttp.create();
request.open("GET", "sample001.xml");
request.onreadystatechange = function() {
  if (request.readyState == 4) {
    var xmlDoc = request.responseXML;
    marker.openInfoWindowXslt(xmlDoc, "sample001.xsl");
  }
}
request.send(null);

showMapBlowup([zoomLevel, [mapType]])

解説

サブマップウィンドゥを表示する。
zoomLevel は、1 ～ 17 の数値で、小さいほど拡大して表示される。（ 0 は出来ない。バグかな？）
mapTypes には、G_MAP_TYPE, G_SATELLITE_TYPE, G_HYBRID_TYPEのいずれかを設定出来る。

使用例サンプル

var marker = new GMarker(new GPoint(132.46151447296142, 34.39951809672059));
map.addOverlay(marker);
marker.showMapBlowup(1, G_MAP_TYPE);

イベント

click

解説

マーカーをクリックすると動作するイベント。

使用例サンプル

GEvent.addListener(marker, 'click', function() {
    marker.openInfoWindowHtml("マーカーがクリックされました");
});

infowindowopen

解説

マーカーに関連付けられたサブウィンドゥが開いた時に動作するイベント。
マップの infowindowopen イベントより先に動作する。

使用例サンプル

GEvent.addListener(marker, "infowindowopen", function() {
  window.alert("サブウィンドゥが開きました");
});

infowindowclose

解説

マーカーに関連付けられたサブウィンドゥが閉じた時に動作するイベント。
マップの infowindowclose イベントより後に動作する。

使用例サンプル

GEvent.addListener(marker, "infowindowclose", function() {
  window.alert("サブウィンドゥが閉じました");
});

`GPolyline`

GPolyline は、オーバーレイの一つで、
複数の座標の配列を与えることにより、ラインを引くことが出来ます。

使用時の注意点

IE で GPolyline を使用する場合は、ページに VML 名前空間を組み込む必要があります。
詳しくは、意外と忘れがちな Google Maps API 使用時の注意点を参照。

GPolyline(points[, color[, weight[, opacity]]])

解説

points は、GPoint型の値を配列にしたもの。（参照 : GPoint）
color は、HTMLでも使用する、#0000ff のような１６進数形式で色を指定出来る。
weight は、線の太さ（単位はpx）。 opacity は、透明度。（ 0 ～ 1 の間で設定する）

使用例サンプル

var points = [];
points[0] = new GPoint(132.46151447296142, 34.39951809672059);
points[1] = new GPoint(132.46251447296142, 34.40051809672059);
points[2] = new GPoint(132.46051447296142, 34.40151809672059);
var line = new GPolyline(points, "#ff0000", 5, 0.5);
map.addOverlay(line);

`GIcon`

マップに表示するアイコンの画像を指定する時に使用します。
image（またはtransparent）、iconSize、iconAnchor の設定が必須です。
shadow を設定する時は、shadowSize の設定が必須です。
サブウィンドゥを使用する時は、infoWindowAnchor も設定する必要があります。

GIcon([copy])

解説

copy は、GIcon型。先に設定した GIcon の設定を別の GIcon に使用出来る。

使用例サンプル

var icon = new GIcon();
icon.image = "http://ponpon-village.net/ajax/img/hiyo05.gif";
icon.iconSize = new GSize(25, 30);
icon.iconAnchor = new GPoint(13.5, 40);
var marker = new GMarker(new GPoint(132.46151447296142, 34.39951809672059), icon);
map.addOverlay(marker);

var icon2 = new GIcon(icon);
var marker = new GMarker(new GPoint(132.46251447296142, 34.39851809672059), icon2);
map.addOverlay(marker);

プロパティ

image

解説

メインのアイコン画像のURL(URI)を設定する。

使用例サンプル

var icon = new GIcon();
icon.image = "http://ponpon-village.net/ajax/img/hiyo05.gif";
icon.iconSize = new GSize(25, 30);
icon.iconAnchor = new GPoint(13.5, 40);
var marker = new GMarker(new GPoint(132.46151447296142, 34.39951809672059), icon);
map.addOverlay(marker);

shadow

解説

サブのアイコン画像のURL(URI)を設定する。
メインアイコンの後ろに重なって表示され、主にメインアイコンの影を表示する時などに使用する。

使用例サンプル

var icon = new GIcon();
icon.image = "http://ponpon-village.net/ajax/img/hiyo05.gif";
icon.shadow = "http://ponpon-village.net/ajax/img/hiyo05_shadow.gif";
icon.iconSize = new GSize(25, 30);
icon.shadowSize = new GSize(39, 18);
icon.iconAnchor = new GPoint(13.5, 40);
var marker = new GMarker(new GPoint(132.46151447296142, 34.39951809672059), icon);
map.addOverlay(marker);

iconSize

解説

メインのアイコン画像の表示サイズを設定する。GSize型。単位はpx
画像の実サイズ以外に設定すると、設定したサイズに拡大・縮小して表示される。

使用例サンプル

var icon = new GIcon();
icon.image = "http://ponpon-village.net/ajax/img/hiyo05.gif";
icon.iconSize = new GSize(30, 40);
icon.iconAnchor = new GPoint(13.5, 40);
var marker = new GMarker(new GPoint(132.46151447296142, 34.39951809672059), icon);
map.addOverlay(marker);

shadowSize

解説

サブのアイコン画像の表示サイズを設定する。GSize型。単位はpx
画像の実サイズ以外に設定すると、設定したサイズに拡大・縮小して表示される。

使用例サンプル

var icon = new GIcon();
icon.image = "http://ponpon-village.net/ajax/img/hiyo05.gif";
icon.shadow = "http://ponpon-village.net/ajax/img/hiyo05_shadow.gif";
icon.iconSize = new GSize(25, 30);
icon.shadowSize = new GSize(50, 25);
icon.iconAnchor = new GPoint(13.5, 40);
var marker = new GMarker(new GPoint(132.46151447296142, 34.39951809672059), icon);
map.addOverlay(marker);

iconAnchor

解説

アイコンの表示位置を設定する。GPoint型。単位はpx
アイコン画像左上からみて指定した位置が、マーカーの表示座標と重なる。
アイコン画像の左上は GPoint(0, 0) 。

使用例サンプル

var icon = new GIcon();
icon.image = "http://ponpon-village.net/ajax/img/hiyo05.gif";
icon.iconSize = new GSize(25, 30);
icon.iconAnchor = new GPoint(0, 0);
var marker = new GMarker(new GPoint(132.46151447296142, 34.39951809672059), icon);
map.addOverlay(marker);

infoWindowAnchor

解説

サブウィンドゥの表示位置を設定する。GPoint型。単位はpx
アイコン画像左上からみて指定した位置が、サブウィンドゥの表示座標と重なる。
アイコン画像の左上は GPoint(0, 0) 。

使用例サンプル

var icon = new GIcon();
icon.image = "http://ponpon-village.net/ajax/img/hiyo05.gif";
icon.iconSize = new GSize(25, 30);
icon.iconAnchor = new GPoint(13.5, 40);
icon.infoWindowAnchor = new GPoint(21, 18);
var marker = new GMarker(new GPoint(132.46151447296142, 34.39951809672059), icon);
map.addOverlay(marker);
marker.openInfoWindowHtml("広島城");

printImage

解説

IE専用
マップを印刷する時に、アイコンの画像を別の画像に変更出来る。
未設定だと現在のアイコンが印刷される。
印刷時のアイコン画像のサイズは、通常時のアイコン画像と同じサイズになる。（参照：iconSize）
設定すると、mozPrintImage 未設定時に限り、Mozilla ではアイコン画像が表示されなくなる！
（サンプルは Firefox のみで確認済み）

使用例サンプル

var icon = new GIcon();
icon.image = "http://ponpon-village.net/ajax/img/hiyo05.gif";
icon.iconSize = new GSize(25, 30);
icon.iconAnchor = new GPoint(13.5, 40);
icon.printImage = "http://ponpon-village.net/ajax/img/hiyo04.gif";
var marker = new GMarker(new GPoint(132.46151447296142, 34.39951809672059), icon);
map.addOverlay(marker);

mozPrintImage

解説

Mozilla専用（サンプルはFirefoxでのみ確認済み）
マップを印刷する時に、アイコンの画像を別の画像に変更出来る。
未設定だと現在のアイコンが印刷される。
印刷時のアイコン画像のサイズは、通常時のアイコン画像と同じサイズになる。（参照：iconSize）
設定しても、IE ではアイコンは変化なし！

使用例サンプル

var icon = new GIcon();
icon.image = "http://ponpon-village.net/ajax/img/hiyo05.gif";
icon.iconSize = new GSize(25, 30);
icon.iconAnchor = new GPoint(13.5, 40);
icon.mozPrintImage = "http://ponpon-village.net/ajax/img/hiyo04.gif";
var marker = new GMarker(new GPoint(132.46151447296142, 34.39951809672059), icon);
map.addOverlay(marker);

printShadow

解説

IE専用
マップを印刷する時に、サブのアイコンの画像を設定出来る。
未設定だと表示されない。
印刷時のアイコン画像のサイズは、通常時のサブのアイコン画像と同じサイズになる。（参照：shadowSize）

使用例サンプル

var icon = new GIcon();
icon.image = "http://ponpon-village.net/ajax/img/hiyo05.gif";
icon.shadow = "http://ponpon-village.net/ajax/img/hiyo05_shadow.gif";
icon.iconSize = new GSize(25, 30);
icon.shadowSize = new GSize(50, 25);
icon.printShadow = "http://ponpon-village.net/ajax/img/hiyo05_shadow.gif";
icon.iconAnchor = new GPoint(13.5, 40);
var marker = new GMarker(new GPoint(132.46151447296142, 34.39951809672059), icon);
map.addOverlay(marker);

transparent

解説

アイコン画像のURL(URI)を設定する。
マーカーのクリック出来る範囲が画像の透明の背景のところになることがあるのだけど、
そんな時に画像の部分もクリックできるようにしたい時とかに使用。
通常は透明度が99%の空白の画像を用意して使用する。
メインのアイコンの前面に画像が表示される。
ということは、メインのアイコンに重なると別のアイコンになっちゃうような、着せ替え的なことも出来る！？
ただし、画像のサイズはメインのアイコンと同じになる。

使用例サンプル

var icon = new GIcon();
icon.image = "http://ponpon-village.net/ajax/img/blue-ani02_new.png";
icon.iconSize = new GSize(40, 41);
icon.transparent = "http://ponpon-village.net/ajax/img/ururu01_new.png";
icon.iconAnchor = new GPoint(13.5, 50);
var marker = new GMarker(new GPoint(132.46151447296142, 34.39951809672059), icon);
map.addOverlay(marker);

imageMap

解説

アイコンのクリック出来る範囲を指定できる。
X / Y の配列で指定。単位は px 。画像の左上の X / Y は、[0, 0]。
画像左上から下に10ピクセル（[0, 10]）、そこから右に10ピクセル（[10, 10]）、
さらにそこから上に10ピクセル（[10, 0]）の正方形の範囲内をクリック可能にする場合は、
[0, 0, 0, 10, 10, 10, 10, 0] となる。このように X と Y を交互に設定。
transparent を設定しておかなければならない
transparent を忘れると、Firefox では、アイコンの位置がおかしくなる。
ただし、IE では動作しない機能。範囲は指定出来ないし、アイコンの位置がおかしくなることもない。
Firefox で動作確認済み。

使用例サンプル

var icon = new GIcon();
icon.image = "http://ponpon-village.net/ajax/img/blue-ani02_new.png";
icon.iconSize = new GSize(40, 41);
icon.transparent = "http://ponpon-village.net/ajax/img/ururu01_new.png";
icon.iconAnchor = new GPoint(13.5, 50);
icon.imageMap = [0,0,0,20,20,20,20,0];
var marker = new GMarker(new GPoint(132.46151447296142, 34.39951809672059), icon);
map.addOverlay(marker);

`GEvent`

全てのイベントの登録と実行を操作します。
GEvent は全て静的メソッドで構成されているので、
例えば GMap の時の var map = new GMap(...）のような、new は不要で、
そのまま GEvent.addListener(...) または、var event = GEvent.addListener(...) と記述します。

静的メソッド

addListener(source, eventName, listenerFn)

解説

イベントリスナーを追加する。
source の eventName イベントが発生すると、listenerFn が実行される。
source は、イベントが発生するオブジェクト。（マップやマーカー）
eventName は、イベント名。（click や move など。詳細は、マップやマーカーのイベントを参照。）
listenerFn には、処理を記述する。

使用例サンプル

GEvent.addListener(map, "moveend", function() {
  alert("マップが移動しました");
});

removeListener(listener)

解説

イベントリスナーを削除する。
listener にはイベントリスナーを指定。

使用例サンプル

var mapmoveend = GEvent.addListener(map, "moveend", function() {
  alert("マップの移動イベントを削除します");
  GEvent.removeListener(mapmoveend);
});

clearListeners(source, eventName)

解説

指定したイベントを削除する。
source の eventName イベントを全て削除する。
source は、イベントが発生するオブジェクト。（マップやマーカー）
eventName は、イベント名。（click や move など。詳細は、マップやマーカーのイベントを参照。）

使用例サンプル

GEvent.addListener(map, "moveend", function() {
  alert("マップの移動イベントを削除します");
  GEvent.clearListeners(map, "moveend");
});

trigger(source, eventName[, args...])

解説

イベントを好きな場所で起動させることが出来る。
source は、イベントが発生するオブジェクト。（マップやマーカー）
eventName は、イベント名。（click や move など。詳細は、マップやマーカーのイベントを参照。）
args... には、そのイベントで取得できる値をセット。（overlay や point など。詳細は、マップのイベントを参照。）
サンプルでは、overlay は空で、point のみ指定しているので、point の時のイベントとなる。

使用例サンプル

GEvent.addListener(map, 'click', function(overlay, point) {
  if (overlay) {
    window.alert('マーカー削除');
    map.removeOverlay(overlay);
  } else if (point) {
    window.alert('クリックした座標 : ' + point.x + ' , ' + point.y);
  }
});
GEvent.trigger(map, 'click', '', new GPoint(132.46151447296142, 34.39951809672059));

bind(source, eventName, object, method)

解説

処理とイベントを関連付けて使用したい時に使う。

使用例サンプル

function MyApplication() {
  this.counter = 0;
  GEvent.bind(map, "click", this, this.onMapClick);
}
MyApplication.prototype.onMapClick = function() {
  this.counter++;
  window.alert("マップ " + this.counter + " 回クリック");
};
var application = new MyApplication();

`GXmlHttp`

GXmlHttp は、複数のブラウザで XmlHttpRequest が使える機能を提供します。
GXmlHttp は静的メソッドでなので、
例えば GMap の時の var map = new GMap(...）のような、new は不要で、
そのまま var request = GXmlHttp.create() と記述します。

静的メソッド

create()

解説

XmlHttpRequest を使えるようにします。
サンプルでは、GXmlHttp を用いて XML ファイルを読み込み、座標を取得、
その座標を用いてマーカーを作成しています。

使用例サンプル

var request = GXmlHttp.create();
request.open("GET", "sample002.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);

`GXml`

GXml は、XML を解析する機能を提供します。 GXml は静的メソッドでなので、
例えば GMap の時の var map = new GMap(...）のような、new は不要で、
そのまま var xmlDoc = GXml.parse(...）と記述します。

静的メソッド

parse(xmlStr)

解説

XML 形式で記述した文字列 xmlStr を解析し、XML DOM 形式にする。
サンプルでは、テキスト形式で読み込んだデータを、XML DOM 形式に変換している。

使用例サンプル

var request = GXmlHttp.create();
request.open("GET", "sample001.xml", true);
request.onreadystatechange = function() {
  if (request.readyState == 4) {
    var txtDoc = request.responseText;
    var xmlDoc = GXml.parse(txtDoc);
    window.alert(xmlDoc.documentElement.getElementsByTagName("名")[2].text);
  }
}
request.send(null);

value(xmlNode)

解説

XML の要素かノード xmlNode を指定すると、その値が得られる。
サンプルでは、要素「名」の３番目の値を表示している。

使用例サンプル

var request = GXmlHttp.create();
request.open("GET", "sample001.xml", true);
request.onreadystatechange = function() {
  if (request.readyState == 4) {
    var txtDoc = request.responseText;
    var xmlDoc = GXml.parse(txtDoc);
    window.alert(GXml.value(xmlDoc.documentElement.getElementsByTagName("名")[2])); 
  }
}
request.send(null);

`GXslt`

GXslt で、XML データに XSLT を適用することが出来ます。 GXslt の静的メソッドは、
例えば GMap の時の var map = new GMap(...）のような、new は不要で、
そのまま var xsltDoc = GXslt.create(...）と記述します。

静的メソッド

create(xsltXmlDoc)

解説

XML DOM 形式の XML データを、XSLT として扱えるようにする。

使用例サンプル

var xmlDoc;

var request = GXmlHttp.create();
request.open("GET", "sample001.xml", true);
request.onreadystatechange = function() {
  if (request.readyState == 4) {
    xmlDoc = request.responseXML;
  }
}
request.send(null);

var request2 = GXmlHttp.create();
request2.open("GET", "sample001.xsl", true);
request2.onreadystatechange = function() {
  if (request2.readyState == 4) {
    var xslDoc = request2.responseXML;
    var xsl = GXslt.create(xslDoc);
    xsl.transformToHtml(xmlDoc, document.getElementById("disp"))
  }
}

メソッド

transformToHtml(xmlDoc, htmlContainer)

解説

XML DOM 形式の XML データに、XSLT を適用し表示する。
xmlDoc は、XML DOM 形式の XML データ
htmlContainer は、HTMLの<div>タグを与えることで、その場所に出力される。

使用例サンプル

var request = GXmlHttp.create();
request.open("GET", "sample001.xml", true);
request.onreadystatechange = function() {
  if (request.readyState == 4) {
    var xmlDoc = request.responseXML;
    var request2 = GXmlHttp.create();
    request2.open("GET", "sample001.xsl", true);
    request2.onreadystatechange = function() {
      if (request2.readyState == 4) {
        var xslDoc = request2.responseXML;
        var xsl = GXslt.create(xslDoc);
        xsl.transformToHtml(xmlDoc, document.getElementById("disp"));
      }
    }
    request2.send(null);
  }
}
request.send(null);

`GPoint`

GPoint は、マップの座標を表します。座標は、緯度経度です。

GPoint(x, y)

解説

x と y の座標のポイントを作成します。
x は緯度、y は経度です。

使用例サンプル

var map = new GMap(document.getElementById("map"));
var point = new GPoint(132.46151447296142, 34.39951809672059);
map.centerAndZoom(point, 1);

プロパティ

x

解説

緯度 x の値を返します。

使用例サンプル

var map = new GMap(document.getElementById("map"));
var point = new GPoint(132.46151447296142, 34.39951809672059);
map.centerAndZoom(point, 1);
window.alert(point.x);

y

解説

経度 y の値を返します。

使用例サンプル

var map = new GMap(document.getElementById("map"));
var point = new GPoint(132.46151447296142, 34.39951809672059);
map.centerAndZoom(point, 1);
window.alert(point.y);

`GSize`

GSize は、サイズや位置を表します。

GSize(width, height)

解説

サイズを決定します。単位は px
width は横幅、height は縦幅です。
サンプルでは、アイコン用画像のサイズを指定しています。

使用例サンプル

var size = new GSize(25, 30);
var icon = new GIcon();
icon.image = "http://ponpon-village.net/ajax/img/hiyo05.gif";
icon.iconSize = size;
icon.iconAnchor = new GPoint(13.5, 40);
var marker = new GMarker(new GPoint(132.46151447296142, 34.39951809672059), icon);
map.addOverlay(marker);

プロパティ

width

解説

横幅の値を返します。

使用例サンプル

var size = new GSize(25, 30);
var icon = new GIcon();
icon.image = "http://ponpon-village.net/ajax/img/hiyo05.gif";
icon.iconSize = size;
icon.iconAnchor = new GPoint(13.5, 40);
var marker = new GMarker(new GPoint(132.46151447296142, 34.39951809672059), icon);
map.addOverlay(marker);
window.alert(size.width);

height

解説

縦幅の値を返します。

使用例サンプル

var size = new GSize(25, 30);
var icon = new GIcon();
icon.image = "http://ponpon-village.net/ajax/img/hiyo05.gif";
icon.iconSize = size;
icon.iconAnchor = new GPoint(13.5, 40);
var marker = new GMarker(new GPoint(132.46151447296142, 34.39951809672059), icon);
map.addOverlay(marker);
window.alert(size.height);

`GBounds`

GBounds は、２つの座標を指定して、四角形の範囲を作ります。
座標なので、値は緯度経度を与えなければなりません。

GBounds(minX, minY, maxX, maxY)

解説

２つの座標を用いて四角形の範囲を作成します。
minX, maxX は緯度で、
minY, maxY は経度です。
サンプルでは範囲が分かりやすくなるよう、線を引いておいた。

使用例サンプル

var bounds = new GBounds(132.46051447296142, 34.39851809672059, 132.46251447296142, 34.40051809672059);
GEvent.addListener(map, 'click', function(overlay, point) {
  if (point.x >= bounds.minX && point.y >= bounds.minY && point.x <= bounds.maxX && point.y <= bounds.maxY) {
    window.alert("GBound の範囲内をクリックしました！");
  }
});

プロパティ

minX

解説

min だけど、最小（minimum）ではなくて、
GBounds(minX, minY, maxX, maxY) の minX で指定した値を返します。

使用例サンプル

var bounds = new GBounds(132.46251447296142, 34.40051809672059, 132.46051447296142, 34.39851809672059);
GEvent.addListener(map, 'click', function(overlay, point) {
  window.alert("minX : " + bounds.minX);
});

minY

解説

min だけど、最小（minimum）ではなくて、
GBounds(minX, minY, maxX, maxY) の minY で指定した値を返します。

使用例サンプル

var bounds = new GBounds(132.46251447296142, 34.40051809672059, 132.46051447296142, 34.39851809672059);
GEvent.addListener(map, 'click', function(overlay, point) {
  window.alert("minY : " + bounds.minY);
});

maxX

解説

max だけど、最大（maximum）ではなくて、
GBounds(minX, minY, maxX, maxY) の maxX で指定した値を返します。

使用例サンプル

var bounds = new GBounds(132.46251447296142, 34.40051809672059, 132.46051447296142, 34.39851809672059);
GEvent.addListener(map, 'click', function(overlay, point) {
  window.alert("maxX : " + bounds.maxX);
});

maxY

解説

max だけど、最大（maximum）ではなくて、
GBounds(minX, minY, maxX, maxY) の maxY で指定した値を返します。

使用例サンプル

var bounds = new GBounds(132.46251447296142, 34.40051809672059, 132.46051447296142, 34.39851809672059);
GEvent.addListener(map, 'click', function(overlay, point) {
  window.alert("maxY : " + bounds.maxY);
});

Ajaxメニューへメインメニューへ