Google Maps API

Class Reference (意訳とサンプル) (バージョン1用)

バージョン2用リファレンス(意訳とサンプル)
*下記の各ミニサンプルは、すべて訳者が作成したもので、オリジナルのドキュメントには含まれていません。
*下記各メソッドの引数で「?印」の付いたものは省略可です。
*この文書には、オリジナルリファレンスには含まれない、訳者の解釈に基づく意訳や解説等が含まれていますので、あらかじめご了承下さい。
*この文書の記述は(2005.9現在)のベータ版
Google Maps API Documentationに基づいています。したがって、今後内容や実装が変更されることもあり得ます。

GMap

地図を扱うクラス。GMap のインスタンスひとつにつきひとつの地図を制御します。

Constructor

Constructor Description
GMap(container, mapTypes?, width?, height?) 与えられたDIVなどのHTMLコンテナ内に新しい地図を生成します。 地図のタイプが指定されなければ、デフォルトタイプを私用します。 幅、高さが指定されなければ、HTMLコンテナに適用されたサイズを使用します。mapTypes, width, heightは省略可能です。 (2005.9現在、mapTypes, width, heightの引数指定には不具合があるようで、省略して他の方法で指定するのが一般的)

サンプル

サンプル
<div id="map" style="width:200px;height:200px"></div>
  :
    var map = new GMap(document.getElementById("map"));
    map.centerAndZoom(new GPoint(140.224417, 35.977771), 1);    

<div id="mapdiv"></div> : mapDIV1 = document.getElementById("mapdiv"); mapDIV1.style.width = '100px'; //幅を指定します mapDIV1.style.height = '100px'; //高さを指定します var map1 = new GMap(mapDIV1); map1.centerAndZoom(new GPoint(140.224417, 35.977771), 5); map1.setMapType(G_SATELLITE_TYPE); //衛星写真のタイプを指定します

Methods

Configuration

Method Description
enableDragging() ダイナミックなドラッギングを可能にします (デフォルトはenabled です)
disableDragging() ダイナミックなドラッギングをできなくします。地図は固定されます。
draggingEnabled() ドラッグ可能ならtrueを返します。
enableInfoWindow() 情報ウインドウを使えるようにします。 (デフォルトはenabled)
disableInfoWindow() 情報ウインドウを使えないようにします。開いた情報ウインドウがあれば閉じます。
infoWindowEnabled() 情報ウインドウを使えるならtrueを返します。

サンプル


    var map = new GMap(document.getElementById("map"));
    map.centerAndZoom(new GPoint(140.224417, 35.977771), 1);
    //ドラッグを利用可能にします(デフォルトなので省略可)
    map.enableDragging()

//ドラッグをできなくします map.disableDragging()
//ドラッグ可能なら固定します if(map.draggingEnabled())map.disableDragging()
//情報ウインドウを利用可能にします(デフォルトなので省略可) map.enableInfoWindow()
//情報ウインドウを利用できなくします map.disableInfoWindow()
//情報ウインドウを利用可能なら使えなくします if(map.infoWindowEnabled())map.disableInfoWindow()

Controls

addControl(control) コントロールを地図に追加します。
removeControl(control) 地図からコントロールを削除します

サンプル


    var map = new GMap(document.getElementById("map"));
    map.centerAndZoom(new GPoint(140.224417, 35.977771), 1);
    //パン移動とスライダーズームの使える大きなコントロール
    map.addControl(new GLargeMapControl());

//パン移動とズームの使える小さなコントロール map.addControl(new GSmallMapControl());
//ズームの使える小さなコントロール(パン移動なし) map.addControl(new GSmallZoomControl());
//衛星画像ボタンなどの地図タイプを選べるボタンコントロール map.addControl(new GMapTypeControl());
controlA = new GSmallZoomControl() controlB = new GMapTypeControl() map.addControl(controlA); map.addControl(controlB); //タイプコントロールだけを削除 map.removeControl(controlB);

State

Method Description
getCenterLatLng() 中心の経度/緯度を返します。 (戻り値は、オブジェクトで、経度はoj.x、は緯度oj.yで受け取れます。oj.toString()すると"(140.22441745, 35.97777176)"といった百分率単位の経緯度文字列が得られます。 オブジェクトのままでrecenterOrPanToLatLng()などの引数に使うこともできます。)
getBoundsLatLng() 地図領域の経度/緯度を返します。(戻り値は、オブジェクトで、 oj.minX、oj.minY、oj.maxX、oj.maxYを受け取ることができます。oj.toString()すると "Bounds(140.2211880683899,35.975175722860186,140.22762537002563,35.98038507624433)")といった文字列が得られます。
getSpanLatLng() 地図領域の幅/高さを経緯度の絶対値で返します。つまり、地図の左右と上下の経緯度の差を出し、マイナスの符号を取った値です。 幅はoj.with、高さはoj.heightで受け取れます。 oj.toString()すると("(0.0064373016357421875, 0.005209353384145743)")といった百分率単位の経緯度文字列が得られます。
getZoomLevel() ズームレベルを整数で返します。
centerAtLatLng(latLng) 引数で与えられたGpointを地図の中心にします。
recenterOrPanToLatLng(latLng) 引数で与えられたGpointを地図の中心にしますが、現在の表示されているエリア内なら滑らかに移動します。
zoomTo(zoomLevel) 与えられた整数のズームレベルへズームさせます。
centerAndZoom(latLng, zoomLevel) 地図中心の経緯度座標とズームレベルを与えます。
getMapTypes() サポートする地図タイプリストを配列で返します。 (G_MAP_TYPE, G_SATELLITE_TYPE, G_HYBRID_TYPEなどがあります。)
getCurrentMapType() 現在の地図タイプを返します。 (G_MAP_TYPE, G_SATELLITE_TYPE, G_HYBRID_TYPEなどがあります。)
setMapType(mapType) 地図タイプをセットします。 (G_MAP_TYPE, G_SATELLITE_TYPE, G_HYBRID_TYPEなどがあります。)

サンプル


    var map = new GMap(document.getElementById("map"));
    map.centerAndZoom(new GPoint(140.22441745, 35.97777176), 1);    
    old = map.getCenterLatLng();
    
    //ドラッグ後、初期位置へ戻ります
    GEvent.addListener(map, "moveend", function() {
      map.recenterOrPanToLatLng(old, 1);
    });


//領域の座標を取得 bound = map.getBoundsLatLng(); //2秒後に左下角へ移動 setTimeout(function (){ map.recenterOrPanToLatLng(new GPoint(bound.minX, bound.minY), 1) },2000 );
//領域の座標を取得 bound = map.getBoundsLatLng(); //領域のサイズを取得 span = map.getSpanLatLng(); //左辺中心座標 toX = bound.minX; toY = bound.minY + span.height/2; //2秒後に左辺中心へ移動 setTimeout(function (){ map.recenterOrPanToLatLng(new GPoint(toX,toY), 1) },2000 );
//ズームレベルが表示されます alert(map.getZoomLevel());
//領域の座標を取得 bound = map.getBoundsLatLng(); //2秒後に右上角へ移動 setTimeout(function (){ map.centerAtLatLng(new GPoint(bound.maxX, bound.maxY)); },2000 );
//領域の座標を取得 bound = map.getBoundsLatLng(); //2秒後に右下角へパン移動 setTimeout(function (){ map.recenterOrPanToLatLng(new GPoint(bound.maxX, bound.minY)); },2000 );
//ページロード完了後にズーム3へ window.onload = function (){ map.zoomTo(3) };
//中心座標(140.224417, 35.977771)、ズームレベル 1で表示します。 map.centerAndZoom(new GPoint(140.224417, 35.977771), 1);
//衛星写真タイプにします map.setMapType(G_SATELLITE_TYPE); //地図タイプにします map.setMapType(G_MAP_TYPE); //デュアルタイプにします map.setMapType(G_HYBRID_TYPE);

Overlays

Method Description
addOverlay(overlay) 引数で渡したオーバーレイオブジェクト(GMarker または GPolyline)を地図に追加します。
removeOverlay(overlay) 引数で渡したオーバーレイオブジェクトを削除します。
clearOverlays() すべてのオーバーレイオブジェクトを削除します。

サンプル



    var map  = new GMap(document.getElementById("map"));
    map.centerAndZoom(new GPoint(140.224, 35.977), 0); 
    
    //マーカーを追加    
    var point  = new GPoint(140.224, 35.977);       
    var marker = new GMarker(point);
    map.addOverlay(marker);
    
    //ポリラインを追加
    var points = [
      new GPoint(140.223, 35.976),
      new GPoint(140.224, 35.977),
      new GPoint(140.2235, 35.978)
    ];
    var line = new GPolyline(points,'#000000',5,0.7) ;
    map.addOverlay(line);


var marker = new GMarker(point); map.addOverlay(marker); //クリックでマーカーを消します GEvent.addListener(marker, "click", function() { map.removeOverlay(marker); });
map.addOverlay(marker1); map.addOverlay(marker2); map.addOverlay(marker3); //marker3をクリックするとマーカーがすべて消えます GEvent.addListener(marker3, "click", function() { map.clearOverlays(); });

Info Window

Method Description
openInfoWindow(latLng, htmlElem, pixelOffset?, onOpenFn?, onCloseFn?) 情報ウインドウを開きます。内容は第二引数へDOMで渡します。第一引数は経緯度をGPointで渡し、 省略可能な第三引数以降で、オフセット位置(GSize)や オープン時に実行する関数、クローズ時に実行する関数を与えることもできます。
openInfoWindowHtml(latLng, htmlStr, pixelOffset?, onOpenFn?, onCloseFn?) openInfoWindowと似ていますが、第二引数へHTML文字列を渡すことができます。 オフセット位置(GSize)や オープン時に実行する関数、クローズ時に実行する関数を与えることもできます。
openInfoWindowXslt(latLng, xmlElem, xsltUri, pixelOffset?, onOpenFn?, onCloseFn?) openInfoWindowに似ていますが、 XML要素とXSLTのURIを与えて、情報ウィンドウを経緯座標に開きます。GXmlHttpでダウンロードされ、URIが最初に与えられた以後キャッシュされます。オフセット位置(GSize)や オープン時に実行する関数、クローズ時に実行する関数を与えることもできます。
showMapBlowup(point, zoomLevel?, mapType?, pixelOffset?, onOpenFn?, onCloseFn?)) 情報ウィンドウ内へ、マーカー周辺のマップを表示して開きます。 ズームレベル(省略すると1)とマップタイプ(省略時は現在のタイプ)を与えることができます。オフセット位置(GSize)や オープン時に実行する関数、クローズ時に実行する関数を与えることもできます。
closeInfoWindow() 情報ウィンドウが開いていれば閉じます。

サンプル

<div id="msg">メッセージ InfoWindow</div>

    var map  = new GMap(document.getElementById("map"));
    map.centerAndZoom(new GPoint(140.224, 35.977), 0); 
    //情報ウインドウを表示
    map.openInfoWindow(new GPoint(140.224, 35.977),
                        document.getElementById('msg'));


var htm = "<b>メッセージ</b> InfoWindow" var map = new GMap(document.getElementById("map")); map.centerAndZoom(new GPoint(140.224, 35.977), 0); //情報ウインドウを表示 map.openInfoWindowHtml(new GPoint(140.224, 35.977),htm);
//情報ウインドウを表示 map.openInfoWindowHtml(new GPoint(140.224, 35.977),htm);
//マーカーを追加 var point = new GPoint(140.224, 35.977); var marker = new GMarker(point); map.addOverlay(marker); //広域衛星写真で情報ウインドウを表示 map.showMapBlowup(point,12,G_SATELLITE_TYPE);

Events

Event Arguments Description
click overlay, point 地図やオーバーレイのクリックがトリガとなります。 オーバーレイがクリックされるとオーバーレイのオブジェクトが、第一引数として渡せます。(このとき、第二引数はundefinedです。)地図上をクリックした時は、第二引数で経緯度pointを渡せます。(このとき、第一引数はnullです。)
move none 地図が動いている時がトリガとなります。このイベントは地図がドラッグされている間発生し続けます。
movestart none 連続的なパンやドラッグ移動の開始がトリガとなります。
moveend none 地図の移動の終わりがトリガとなります。このイベントは連続的パンの終わりで少なくとも一度は発生します。
zoom oldZoomLevel, newZoomLevel 地図のズームレベルが変化した後に発生します。旧ズームレベルと新ズームレベルを引数として渡せます。
maptypechanged none 地図タイプが変化した後に発生します。
infowindowopen none 情報ウインドウが開いた後に発生します。
infowindowclose none 情報ウインドウが閉じた後に発生します。
addoverlay overlay オーバーレイが追加された後に発生します。
removeoverlay overlay オーバーレイがひとつ削除された後に発生します。clearOverlaysでは発生しません。
clearoverlays none すべてのオーバーレイが削除された後に発生します。

サンプル


    var map  = new GMap(document.getElementById("map"));
    map.centerAndZoom(new GPoint(140.224, 35.977), 0); 
    //クリックした座標をダイアログ表示
    GEvent.addListener(map, 'click', function(overlay, point){
      alert(point);
    });

GEvent.addListener(map, 'move', function(){ });
GEvent.addListener(map, 'movestart', function(){ });
GEvent.addListener(map, 'zoom', function(oldZoomLevel,newZoomLevel ){ });
GEvent.addListener(map, 'maptypechanged', function(){ });
GEvent.addListener(map, 'infowindowopen', function(){ });
GEvent.addListener(map, 'addoverlay', function(overlay){ });
GEvent.addListener(map, 'removeoverlay', function(overlay){ });
GEvent.addListener(map, 'clearoverlays', function(){ });

GMarker

GMarkerは地図上の一点にアイコンを表示するマップオーバレイの一つのタイプです。 コンストラクタはGIconのインスタンスとそれが示されるべきポイント座標を用います。 また、GMarkerはマーカーの上で情報ウィンドウを開けるいくつかの便利なメソッドを含んでいます。

Constructor

Constructor Description
GMarker(point, icon?) 与えられたポイントへ与えられたアイコンでマーカーを生成します。アイコンが与えられなければ、デフォルトのGoogle Maps アイコンを利用します。

サンプル


var map = new GMap(document.getElementById("map"));
    map.centerAndZoom(new GPoint(140.22441745, 35.97777176), 1);    
    //中心にデフォルトマーカーを表示します。
    var marker = new GMarker(new GPoint(140.22441745, 35.97777176));
    map.addOverlay(marker);

Methods

Method Description
openInfoWindow(htmlElem) このマーカー上へ与えられたHTMLコンテンツを持つ情報ウィンドウを開きます。htmlElemはDOMで渡します。GMapのopenInfoWindowとの違いは、親オブジェクトが地図ではなくマーカーであることと、引数がシンプルなことです。
openInfoWindowHtml(htmlStr) openInfoWindowと似ていますが、 HTML文字列を渡して情報ウィンドウを開きます。GMapのopenInfoWindowHtmlとの違いは、親オブジェクトが地図ではなくマーカーであることと、引数がシンプルなことです。
openInfoWindowXslt(xmlElem, xsltUri) openInfoWindowと似ていますが、 XML要素とXSLTのURIを与えて情報ウィンドウを開きます。GXmlHttpでダウンロードされ、URIが最初に与えられた以後キャッシュされます。GMapのopenInfoWindowXsltとの違いは、親オブジェクトが地図ではなくマーカーであることと、引数がシンプルなことです。
showMapBlowup(zoomLevel?, mapType?) 情報ウィンドウ内へ、マーカー周辺のマップを表示して開きます。 ズームレベル(省略すると1)とマップタイプ(省略時は現在のタイプ)を与えることができます。GMapのshowMapBlowupとの違いは、親オブジェクトが地図ではなくマーカーであることと、引数がシンプルなことです。

サンプル


    var div   = document.getElementById("map")
    var map0  = new GMap(div);
    var point = new GPoint(139.765449,35.633477);
    map0.centerAndZoom(point, 1) ;

    //マーカーを追加    
    var marker = new GMarker(point);
    map0.addOverlay(marker);
    //マーカー上にDOMを渡し、情報ウインドウを表示します
    var msg = document.createTextNode("レインボーブリッジです");
    marker.openInfoWindow( msg );

//マーカークリックでHTMLを渡し、情報ウインドウを表示します GEvent.addListener(marker, "click", function() { var msg = "<b>レインボーブリッジ</b>です"; marker.openInfoWindowHtml( msg ); });
//マーカー周辺のマップを表示して情報ウインドウを表示します GEvent.addListener(marker, "click", function() { marker.showMapBlowup(); });

Events

Event Arguments Description
click none ユーザがマーカーをクリックした時に発生します。
infowindowopen none 上記メソッドを持つマーカー上に情報ウインドウが開いた時に発生します。
infowindowclose none 情報ウインドウが閉じたときに発生します。

GPolyline

ベクターポリラインのオーバーレイを表します. A polyline is drawn with the vector drawing facilities of the browser if they are available or an image overlay from Google servers otherwise.

Constructor

Constructor Description
GPolyline(points, color?, weight?, opacity?) 第一引数で与えられた、経緯度ポイントの配列からポリラインの線分を構築します。color,weight,opacityは、省略可で、 color引数は"#000000"のように16進のHTMLカラーで渡します(デフォルトは#0000ff)。weightは、線分の太さをピクセルで指定(デフォルトは5)し、 opacityは不透明度を0~1の間で浮動小数点指定(デフォルトは0.45)します。

サンプル


<!-- IEは VMLでGPolylineを実現するため、
     GPolyline使用時には下記VML関連の指定が必要です-->
<!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">
    <style type="text/css">
    v\:* {
      behavior:url(#default#VML);
    }
    </style>

var map = new GMap(document.getElementById("map")); map.centerAndZoom(new GPoint(139.75999, 35.62667), 3); //線分のポイント座標配列を作成 var points = []; points.push(new GPoint(139.74088, 35.62555));//品川 points.push(new GPoint(139.75562, 35.63442));//芝浦 points.push(new GPoint(139.77454, 35.62266));//台場 //ポリラインを描画 map.addOverlay(new GPolyline(points,'#000000',5,0.7));

GIcon

アイコンは地図の上にマーカーを表示するのに使われる画像を指定します。 ブラウザ互換性の理由で、アイコンを指定するのは実際には複雑で議論が行われています。 少なくとも、アイコンが地図上に表示される前に、アイコンのimage、shadow、iconSize、shadowSizeとiconAnchor属性を指定する必要があります。もし、情報ウィンドウを使うなら、アイコンのinfoWindowAnchor属性も指定しなければなりません。transparentやimageMapは無くてもクリックイベントは機能しますから、普通の使い方なら、現状(2005.9現在)では省略した方が安全かもしれません。

Constructor

Constructor Description
GIcon(copy?) 新しいアイコンを生成します。引数copyには、ベースとなるアイコンを与えます。この引数は、たとえば、同じシャドウ画像を使ってナンバリング画像の異なる複数のアイコンを作るときなどに便利です。

サンプル


    var map = new GMap(document.getElementById("map"));
    map.centerAndZoom(new GPoint(139.773377, 35.6241453), 1);

    //アイコン作成
    var icon = new GIcon();
    icon.image = "./yazirusi.png";  //アイコン画像
    icon.shadow = "./shadow.png"; //影の画像
    icon.iconSize = new GSize(20, 34);    //アイコンサイズ
    icon.shadowSize = new GSize(37, 34); //影のサイズ
    //アンカーポイントと画像の左上角からの相対オフセット値
    icon.iconAnchor = new GPoint(20,34); 
    //マーカーオブジェクト生成
    var marker = new GMarker(map.getCenterLatLng(), icon);
    map.addOverlay(marker);

//ベースアイコン作成 var baseIcon = new GIcon(); baseIcon.shadow = "./shadow2.png"; baseIcon.iconSize = new GSize(24, 30); baseIcon.shadowSize = new GSize(37, 37); baseIcon.iconAnchor = new GPoint(12,37); //ベースのシャドウアイコンを利用してアイコンを2つ作ります var icon1 = new GIcon(baseIcon); var icon2 = new GIcon(baseIcon); icon1.image = "./aaa.png"; icon2.image = "./bbb.png";

Properties

Property Description
image 手前のアイコン画像のURLです。必須です。
shadow 影のアイコン画像です。必須です。
iconSize 手前のアイコン画像のピクセルサイズです。必須です。
shadowSize 影のアイコン画像のピクセルサイズです。必須です。
iconAnchor アイコンを固定する場所の、アイコン画像の左上角に対するピクセル座標です。必須です。
infoWindowAnchor 情報ウィンドウをアイコンに固定するための、アイコンの左上角に対するピクセル座標です。
printImage 印刷用地図で使われるべき手前のアイコン画像のURLです。 メインアイコン画像と同じサイズであるべきです。
mozPrintImage TFireFox/Mozillaブラウザの印刷用地図で使われるべき手前のアイコン画像のURLです。メインアイコン画像と同じサイズであるべきです。
printShadow 印刷用地図で使われるべき影のアイコン画像用のURLです。多くのブラウザがPNGを印刷できないので、GIFであるべきです。
transparent IEのクリックイベントをキャプチャするために使われる、手前の画像アイコンの仮想的な透明バージョンのURLです。この画像は 24-bit PNG で1%の不透明度を持つメインアイコン画像であるべきですが、メインアイコンと同じ形で同じサイズであるべきです。 メインアイコン画像と同じ形、同じサイズであるべきです。省略可です。
imageMap IE以外のブラウザで、アイコン画像のクリック可能な部分を指定するために使われる、 イメージマップのx/y座標を示す整数の配列です。現状(2005.9現在)では内部的には、HTMLのShapeがpoly(多角形)なイメージマップのCoords属性へimageMap.join(",")で値を渡しています。したがって、与えるデータは頂点1X、頂点1Y、頂点2X、頂点2Y、・・・頂点nX、頂点nY (座標点が不足していた場合、ブラウザが自動で補完(HTML4.01))という形になります。省略可です。

    var icon = new GIcon();
    icon.image = "./yazirusi.png"; 

icon.shadow = "./shadow.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);
icon.iconAnchor = new GPoint(20,34);
icon.printImage = "./yazirusi.gif";
icon.mozPrintImage = "./yazirusi.png";
icon.printShadow = "./yazirusi.gif";
icon.transparent = "./yazirusi.png";
icon.imageMap = new Array(0,0,10,0,10,34,0,34);

GEvent

すべてのイベントの登録とトリガは、GEventクラスで操作されます。 GEventクラスの全てのメソッドは静的なメソッドです。 たとえば、(new Event()).bind(...)ではなくGEvent.bind(...)のように呼び出すべきです。

Static Methods

Method Description
addListener(source, eventName, listenerFn) 第一引数sourceインスタンス上のイベントeventNameによって第三引数のlistenerFn関数が起動します。 removeListenerの引数に使えるリスナートークンを返します。
removeListener(listener) 引数で与えられたリスナーを削除します。 リスナーはaddListenerによって返されるものです。
clearListeners(source, eventName) 引数で与えられたソース上の与えられたイベントのための全てのリスナーを削除します。
trigger(source, eventName, args...) 与えられたソース上で、与えられたイベントを発生させます。argsにはターゲットのリストを並べます。
bind(source, eventName, object, method) 与えられたオブジェクトのメソッドを与えられたソースにバインドします。 与えられたイベントが発生した時、メソッドはオブジェクトと共にGEvent.bind(map, "move", this, this.onMapMove)のように呼ばれます。

サンプル


    var map = new GMap(document.getElementById("map"));
    map.centerAndZoom(new GPoint(139.773377, 35.6241453), 1);
    var marker = new GMarker(map.getCenterLatLng());
    map.addOverlay(marker);
    //クリックイベントを追加します
    GEvent.addListener(map, 'click', function(){
      alert(1);
    });

test = GEvent.addListener(map, 'click', function(){ alert(1); }); setTimeout(function(){ //3秒後にイベントを削除します GEvent.removeListener(test); },3000)
test = GEvent.addListener(marker, 'click', function(){ alert(1); }); //marker上のclickイベントを削除します GEvent.clearListeners(marker,'click');
var map = new GMap(document.getElementById("map")); map.centerAndZoom(new GPoint(139.773377, 35.6241453), 1); var marker1 = new GMarker(map.getCenterLatLng()); var marker2 = new GMarker(new GPoint(139.774, 35.624)); map.addOverlay(marker1); map.addOverlay(marker2); GEvent.addListener(map, 'click', function(){ alert(1); }); //イベントを発生させます GEvent.trigger(marker1,'click'); GEvent.trigger(map,'click',marker1); GEvent.trigger(map,'click',marker1,marker2);
//map上のmoveイベント時にonMapMoveを起動します GEvent.bind(map, "move", this, this.onMapMove); function onMapMove(){ //ステータスバーへ中心座標を表示します window.status=map.getCenterLatLng() }

GXmlHttp

GXmlHttpクラスは、クロスブラウザなXmlHttpRequestインスタンスを作るメソッドをエクスポートします。Ajaxな通信時には必須です。

Static Methods

Method Description
create() 新しいXmlHttpRequestインスタンスを返します。( new ActiveXObject("Microsoft.XMLHTTP")か、new XMLHttpRequest()か、または、nullを返します。)

サンプル


   //data.txt
   //139.773377,35.6241453

    var map = new GMap(document.getElementById("map"));
    map.centerAndZoom(new GPoint(139.774, 35.624), 1);

    var request = GXmlHttp.create();
    //data.txtファイルを読みます
    request.open("GET", "data.txt", true);
    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        var res = request.responseText;
            lon = res.split(',')[0]
            lat = res.split(',')[1]
      //読み込んだ座標データでマーカー位置を決めます
      var point = new GPoint(parseFloat(lon),parseFloat(lat));
      var marker = new GMarker(point);
      map.addOverlay(marker);
 
      }
    }
    request.send(null);

GXml

GXmlクラスは、XMLの文字列をパースするための静的メソッドを提供します。 パーサーはどんなブラウザでも動作するべきです。もし、ネイティブパーサーが無ければ デフォルトのJavaScript XMLパーサを利用しますが、これはブラウザのJavaScriptの実装により、かなり遅くなるかもしれません。

Static Methods

Method Description
parse(xmlStr) XMLを記述した文字列をパースして、XML DOMを返します。
value(xmlNode) 与えられたXML要素かまたはノードから文字列を返します。XML要素からテキストノードを抜き出すのに役立ちます。

サンプル


          
    var map = new GMap(document.getElementById("map"));
    map.centerAndZoom(new GPoint(140.22441745, 35.97777176), 1);    

    var xml  ='<?xml version="1.0" encoding="utf-8" ?>';
        xml +='<item>';
        xml +='  <info>test1</info>';
        xml +='  <lon>140.223</lon>';
        xml +='  <lat>35.977</lat>';
        xml +='</item >';
    
    xmlDoc = GXml.parse(xml);
    xmlDocElm = xmlDoc.documentElement 
    var lons = xmlDocElm.getElementsByTagName('lon')
    var lats = xmlDocElm.getElementsByTagName('lat')
    var lon = lons[0].firstChild.nodeValue
    var lat = lats[0].firstChild.nodeValue
    //xmlから取った座標へマーカーを表示します
    var point = new GPoint(parseFloat(lon),parseFloat(lat));
    var marker = new GMarker(point);
    map.addOverlay(marker);

xmlDoc = GXml.parse(xml); //文字列を抜き出します textString = GXml.value(xmlDoc); document.write(textString) //この場合は、test1140.22335.977という文字列が返ります

GXslt

GXsltクラスは、XMLへXSLTを適用するためのブラウザ独立のメソッドを提供します。 このクラスはどんなブラウザでも動作するべきです。もし、ネイティブの XSLTプロセッサーが無ければ デフォルトのJavaScript XSLT実装を利用しますが、これはブラウザのJavaScriptの実装により、かなり遅くなるかもしれません。

Static Methods

Method Description
create(xsltXmlDoc) 与えられたXML DOM(XSLT)からGXsltインスタンスを生成します。

Methods

Method Description
transformToHtml(xmlDoc, htmlContainer) 第一引数で与えられたXMLドキュメントをこのXSLTで変換します。結果のHTMLで第二引数のHTML DOM コンテナに置きます。

サンプル


  「2-1-32 XSLTを利用してデータを表示する」 を参照

   xsl = GXslt.create(oj.responseXML);
     
   //受信
   xmlData = oj.responseXML ;

   //XMLをXSLTで変換し、結果のHTMLを出力
   xsl.transformToHtml( xmlData , 
                     document.getElementById('htmlContainer'));
                     

GPoint

GPointはある場所の2次元座標座標を表します。GPointが経度/緯度を表す場合、xは経度でyは緯度(100分率、十進表記)です。

Constructor

Constructor Description
GPoint(x, y) 与えられた座標値の新しいポイントを生成します。

Properties

Property Description
x ポイントの x/経度 (または、水平方向) 座標。
y ポイントの y/緯度 (または、垂直方向) 座標。

サンプル


    var map = new GMap(document.getElementById("map"));
    map.centerAndZoom(new GPoint(140.224, 35.977), 1);   
    
    //東経140.224, 北緯35.977の場所へマーカーを追加    
    var point  = new GPoint(140.224, 35.977);       
    var marker = new GMarker(point);
    map.addOverlay(marker);

alert( " 東経" + point.x + " 北緯" + point.y )

GSize

GSize は、2次元のサイズ測定を表します。もし、GSize が経度/緯度の長さを表すなら、widthは、経度の数字で、heightは、緯度の数字です。

Constructor

Constructor Description
GSize(width, height) 与えられた値で新しいサイズを作ります。

Properties

Property Description
width
height 高さ

サンプル


    var map = new GMap(document.getElementById("map"));
    map.centerAndZoom(new GPoint(139.773377, 35.6241453), 1);

    //アイコン作成
    var icon = new GIcon();
    icon.image = "./yazirusi.png"; 
    icon.shadow = "./shadow.png";
    icon.iconSize = new GSize(20, 34);   //アイコンサイズ
    icon.shadowSize = new GSize(37, 34); //影のサイズ
    icon.iconAnchor = new GPoint(20,34); 
    var marker = new GMarker(map.getCenterLatLng(), icon);
    map.addOverlay(marker);


GBounds

GBoundsは、二次元の矩形(内角が直角の四角形)の領域をあらわします。 もし、GBoundsが経緯度座標システム上にあるなら、X座標は経度を表し、Y座標は緯度を表します。 経度/緯度の境界が日付変更線(つまり東経180、西経-180付近)と重なる場合には、 最小座標は数学的に最小(min)の2座標ではなく、左上の座標を示します。(たとえば、日付変更線をまたぐ、経度が170から-170の矩形のminXは、数学的に最小の-170ではなく170です。*プロパティ名にminX、minY、maxX、maxYと付いていますが、実質的には、left、bottom、right、topの意味と考えた方が良いかもしれません。)

Constructor

Constructor Description
GBounds(minX, minY, maxX, maxY) 与えられた座標の新しい領域を作ります。

Properties

Property Description
minX 領域の左辺座標Xです。
minY 領域の下辺座標Yです。
maxX 領域の右辺座標Xです。
maxY 領域の上辺座標Yです。

サンプル


   「2-1-33 DoCoMoのi-エリアをポリライン表示する」 を参照

    //i-エリア領域設定
    bounds = new GBounds(iarea[num][3]/3600000, //西端経度
                         iarea[num][4]/3600000, //南端緯度
                         iarea[num][5]/3600000, //東端経度
                         iarea[num][6]/3600000  //北端緯度
                         )
    //中心経緯度
    var centerX = bounds.minX+(bounds.maxX - bounds.minX)/2;
    var centerY = bounds.minY+(bounds.maxY - bounds.minY)/2;
    //i-エリアへ移動
    map.centerAndZoom(new GPoint(centerX,centerY), 5);