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

• GMap
• GMarker
• GPolyline
• GIcon
• GEvent
• GXmlHttp
• GXml
• GXslt
• GPoint
• GSize
• GBounds

• おまけ内部コードcreateMapSpecs()のメンバー

GMap

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

Constructor

サンプル
<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

    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

    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

    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

    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

<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

    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

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

    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

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

<!-- 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

Constructor

    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);
    //ベースのシャドウアイコンを利用してアイコンを２つ作ります
    var icon1   = new GIcon(baseIcon);
    var icon2   = new GIcon(baseIcon);
    icon1.image = "./aaa.png";
    icon2.image = "./bbb.png";

Properties

    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

    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

   //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

Static Methods

    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

Static Methods

Methods

  「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

Properties

    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

Properties

    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

Properties

   「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);