『入門Ajax 増補改訂版』

Google Maps API

Version 2 Class Reference (意訳とサンプル)

勝手に追加カスタムクラスなど(訳者製)
* この拡張は、訳者が便宜上勝手に作成したもので、Googleとは関係有りません。利用する際は クラスごと自分でコピーして実装する必要があります。使いたい方は、自己責任で勝手にご利用下さい。連絡不要、改造商用利用自由です。

＊下記のミニサンプル約150本は、訳者が参考のために作成したもので、オリジナルのドキュメントには含まれていません。
＊この文書には、オリジナルリファレンスには含まれない、訳者の解釈に基づく意訳や解説等が含まれていますので、あらかじめご了承下さい。
＊適切な訳のできなかったものや新規追加分で未訳のものなどは原文のままになっています。
＊この文書の記述は(2006.8現在)のv2版 Google Maps API Documentationに基づいています。したがって、今後内容や実装が変更されることもあり得ます。
＊v1版 の訳は、こちらです。
＊v1とv2の違いについての簡単なメモ。
＊下記各メソッドの引数で「？印」の付いたものは省略可です。

＊おまけ:GMap2とYUIとじゃらんAPIなどで最近作ってみた マッシュアップサンプル
＊経度・緯度を調べる（地図作成作業補助サンプル）v0.44 http://jsgt.org/ajax/newmon/samples/chapter03/03-31/getlatlon44.htm

サポート by |JavaScript++かも日記|

v2で実装されたいくつかの機能

What's new

【GClientGeocoder ジオコーダー 日本もOKになりました】

【draggable Marker ドラッガブルマーカー】

    var map = new GMap2(document.getElementById("map"));
    var tokyo = new GLatLng(35.65872,139.7454);
    map.setCenter(tokyo, 17);
    //draggable属性付きマーカーを生成します
    var marker = new GMarker(tokyo,{ draggable:true } );
    map.addOverlay(marker);

【GOverviewMapControl オーバービューマップコントロール】

    var map = new GMap2(document.getElementById("map"));
        map.addControl(new GOverviewMapControl(new GSize(200,150)));

【GClientGeocoder ジオコーダー】

    var geocoder = new GClientGeocoder();
    function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          gotoAddre
        );
      }
    }
    function gotoAddre(point) {
      if (!point) {
        document.getElementById("msg").innerHTML =address+"は見つかりませんでした";
      } else {
        map.setCenter(point, 15);
        var marker = new GMarker(point);
        map.addOverlay(marker);
      }
    }

class GMap2

地図を作成するためにクラスGMap2 。APIの中心的クラスです。

Constructor

サンプル
<div id="map" style="width:200px;height:200px"></div>
  :
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.977771,140.224417), 13);

サンプル
<div id="mapdiv"></div>
  :
    var opts={ size : new GSize(500, 500) }; //GMap2第二引数用地図サイズ
    var map = new GMap2(document.getElementById("mapdiv"),opts);
    map.setCenter(new GLatLng(35.65872,139.7454), 17);

Methods

Configuration

サンプル
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.65872,139.7454), 12);
    //ドラッグを利用可能にします(デフォルトなので省略可)
    map.enableDragging();

サンプル
    //ドラッグをできなくします
    map.disableDragging()

サンプル
    //ドラッグ可能なら固定します
    if(map.draggingEnabled())map.disableDragging()

サンプル
    //情報ウインドウを利用可能にします(デフォルトなので省略可)
    map.enableInfoWindow()

サンプル
    //情報ウインドウを利用できなくします
    map.disableInfoWindow()

サンプル
    //情報ウインドウを利用可能なら使えなくします
    if(map.infoWindowEnabled())map.disableInfoWindow()

サンプル
    //ダブルクリックでズームイン/アウトを可能にします(デフォルトで無効)
    map.enableDoubleClickZoom();

サンプル
    map.enableDoubleClickZoom();
         :
    <input type="button" value="ダブルクリックズーム不可"
           onclick="map.disableDoubleClickZoom()" />

サンプル
    //ダブルクリックズームを利用可能なら使えなくします
    if(map.doubleClickZoomEnabled())map.disableDoubleClickZoom();

サンプル
    map.addControl(new GSmallZoomControl());
    //連続した滑らかなズームを可能にします。(デフォルトで無効)
    map.enableContinuousZoom();

サンプル
    map.addControl(new GSmallZoomControl());
    //連続した滑らかなズームを可能にします。(デフォルトで無効)
    map.enableContinuousZoom();
         :
    <input type="button" value="滑らかなズーム不可"
           onclick="map.disableContinuousZoom()" />

サンプル
    //ダブルクリックズームを利用可能なら使えなくします
    if(map.continuousZoomEnabled())map.disableContinuousZoom();

Controls

サンプル
var map = new GMap(document.getElementById("map"));
    map.setCenter(new GLatLng(35.65872,139.7454), 17);
    //パン移動とスライダーズームの使えるラージコントロール
    map.addControl(new GLargeMapControl());

サンプル
    //衛星画像ボタンなどの地図タイプを選べるボタンコントロール
    map.addControl(new GMapTypeControl());

サンプル
    //右下(右から5px,下から15px)へラージコントロールを表示
    map.addControl(  new GLargeMapControl(),
                     new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(5,15))
                   );

サンプル
    controlA = new GSmallZoomControl()
    controlB = new GMapTypeControl()
    map.addControl(controlA);
    map.addControl(controlB);
    //タイプコントロールだけを削除
    map.removeControl(controlB);

サンプル
    //地図のDIVを取得し、ID名を表示します
    var oj = map.getContainer();
    alert(oj.id);

Map Types

サンプル
var map = new GMap(document.getElementById("map"));
    map.setCenter(new GLatLng(35.65872,139.7454), 17);
    //地図タイプリストを取得し、 地図タイプ配列と名前を表示します
    var mt = map.getMapTypes();
    var lists = '';
    for(var i in mt)lists+=mt[i].getName()+","
    alert(mt+"\n"+lists);//[object,object,object] マップ,サテライト,デュエル と表示されます

サンプル
    //現在の地図タイプ名を表示します
    alert(map.getCurrentMapType().getName());//マップと表示されます

サンプル
      //衛星写真タイプにします
      map.setMapType(G_SATELLITE_MAP);
      //地図タイプにします
      map.setMapType(G_NORMAL_MAP);
      //デュアルタイプにします
      map.setMapType(G_DEFAULT_MAP_TYPES);

サンプル
      //カスタムタイプを追加します
      var myMapA = new GMapType([myLayA], G_SATELLITE_MAP.getProjection(), 'グレーです');
      map.addMapType(myMapA);

サンプル
    var type1 =type2 = map.getCurrentMapType();
    function chgMT1(){ map.removeMapType(type1); } //現タイプを削除
    function chgMT2(){ map.setMapType(type2); }    //タイプを戻す

Map State

サンプル
var map = new GMap2(document.getElementById("map"));
    alert(map.isLoaded()); //falseが表示されます
    map.setCenter(new GLatLng(35.65872,139.7454), 17);
    alert(map.isLoaded()); //trueが表示されます

サンプル
    //マップビューの地理的な中心座標
    map.setCenter(new GLatLng(35.65872,139.7454), 17);
    alert(map.getCenter()); //(35.65872, 139.7454)と表示されます

サンプル
    //マップビューの可視の長方形領域
    map.setCenter(new GLatLng(35.65872,139.7454), 17);
    document.write(map.getBounds()); //((35.65784544082353, 139.74432349205014), (35.65958888477265, 139.74646925926208)) を返します

サンプル
    map.setCenter(new GLatLng(35.65872,139.7454), 17);
    alert(map.getBoundsZoomLevel(map.getBounds())); //17を返します

サンプル
<div id="map" style="width:200px;height:200px"></div>
  :
    //マップビューのサイズ(ピクセル)
    document.write(map.getSize()); //(200, 200)を返します

サンプル
    //現在のズームレベル
    map.setCenter(new GLatLng(35.65872,139.7454), 17);
    document.write(map.getZoom()); //17を返します

Modify the Map State

サンプル
var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.65872,139.7454), 17);

サンプル
    map.setCenter(new GLatLng(35.65872,139.7454), 17);
    //2秒後に(35.6580,139.7450)へ移動します
    window.setTimeout(function() {
        map.panTo(new GLatLng(35.6580,139.7450));
    }, 2000);

サンプル
    map.setCenter(new GLatLng(35.65872,139.7454), 17);
    //2秒後に 左へ128px 上へ128px 移動します
    window.setTimeout(function() {
        map.panBy(new GSize(128, 128));
        //map.panBy({width:128,height:128});でも動きます
    }, 2000);

サンプル
    map.setCenter(new GLatLng(35.65872,139.7454), 17);
    //2秒後に右下方向へパンします
    window.setTimeout(function() {
        map.panDirection(-1, -1);
    }, 2000);

サンプル
    map.setCenter(new GLatLng(35.65872,139.7454), 17);
    //1秒後にレベル16へズーム値を変更します
    window.setTimeout(function() {
        map.setZoom(16);
    }, 1000);

サンプル
<input type="button" value="ズームイン" onclick="map.zoomIn()" />
  :
    map.setCenter(new GLatLng(35.65872,139.7454), 10);

サンプル
<input type="button" value="ズームアウト" onclick="map.zoomOut()" />
  :
    map.setCenter(new GLatLng(35.65872,139.7454), 10);

サンプル
<input type="button" value="復元" onclick="map.returnToSavedPosition()" />
  :
    map.setCenter(new GLatLng(35.65872,139.7454), 17);
    //2秒後に 左へ128px 上へ128px 移動しますがreturnToSavedPosition()で戻せます。
    window.setTimeout(function() {
        map.panBy(new GSize(128, 128));
        map.savePosition1();
    }, 2000);

サンプル
<div id="map" style="width:200px;height:200px"></div>
<input type="button" value="リサイズ" onclick="map.checkResize()" />
  :
    //1秒後にDIV幅を1200pxに変更します
    //（表示されないエリアができますが、checkResize()で修正できます。）
    window.setTimeout(function() {
        var div = document.getElementById('map');
        div.style.width="1200px";
    }, 1000);

Overlays

サンプル
    //マーカーを追加
    var point  = new GPoint(139.7454, 35.65872);
    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();
    });

サンプル
    //marker1をクリックするとG_MAP_MAP_PANEへ文字を出力
    GEvent.addListener(marker1, "click", function() {
        div.innerHTML="クリックされました";
        map.getPane(G_MAP_MAP_PANE).appendChild(div);
    });

Info Window

サンプル
<div id="msg">メッセージ InfoWindow</div>
 :
var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.65872,139.7454), 17);
    //情報ウインドウオープン
    map.openInfoWindow(new GLatLng(35.65872,139.7454),
                          document.getElementById('msg'));

サンプル
    //情報ウインドウオープン時にダイアログを出す
    map.openInfoWindow(new GLatLng(35.65872,139.7454),
                        document.getElementById('msg'),
                        {
                          onOpenFn :function(){alert('open')}
                        });

サンプル
    //情報ウインドウオープン
    map.openInfoWindowHtml(new GLatLng(35.65872,139.7454),
                           '<p><b>HTML</b>です</p>');

サンプル
<div id="tab1">TEST 1</div>
<div id="tab2">TEST 2</div>
<div id="tab3">TEST 3</div>
 :
    var infoTabs = [
      new GInfoWindowTab("Tab #1", document.getElementById("tab1")),
      new GInfoWindowTab("Tab #2", document.getElementById("tab2")),
      new GInfoWindowTab("Tab #3", document.getElementById("tab3"))
    ];
    //タブ付き情報ウインドウオープン
    map.openInfoWindowTabs(new GLatLng(35.65872,139.7454),
                           infoTabs,
                           {selectedTab:1}
                          );

サンプル
    var infoTabs = [
      new GInfoWindowTab("Tab #1", "<p><b>Tab1</b>です</p>"),
      new GInfoWindowTab("Tab #2", "<p><b>Tab2</b>です</p>"),
      new GInfoWindowTab("Tab #3", "<p><b>Tab3</b>です</p>")
    ];
    //タブ付き情報ウインドウオープン
    map.openInfoWindowTabsHtml(new GLatLng(35.65872,139.7454),infoTabs);

サンプル
    //クローズアップウインドウをG_SATELLITE_MAPでオープン
    map.showMapBlowup(new GLatLng(35.65872,139.7454),
                      {mapType:G_SATELLITE_MAP});

サンプル
    map.openInfoWindowHtml(new GLatLng(35.65872,139.7454),
        '<p style="width:180px">地図をクリックすると情報ウインドウが消えます</p>');
    //mapをクリックすると情報ウインドウが消えます
    GEvent.addListener(map, "click", function() {
        map.closeInfoWindow();
    });

サンプル
    map.openInfoWindowHtml(new GLatLng(35.65872,139.7454),
        '<p style="width:180px">地図をクリックすると情報ウインドウが消えます</p>');
    //mapをクリックすると情報ウインドウを閉じます
    GEvent.addListener(map, "click", function() {
        map.getInfoWindow().hide();
    });

Coordinate Transformations

サンプル
var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.65872,139.7454), 17);
    var point1 = map.fromLatLngToDivPixel(map.getCenter());
    //mapをクリックすると地図中心のピクセル分左上へパンします
    GEvent.addListener(map, "click", function() {
        map.panBy(new GSize(point1.x, point1.y));
    });

Events

サンプル
    var myMapA = new GMapType([myLayA], G_SATELLITE_MAP.getProjection(), 'NewMap');
    GEvent.addListener(map, 'addmaptype', function() {
        alert("新しいタイプ「"+myMapA.getName()+"」が追加されました");
    });
    map.addMapType(myMapA);

サンプル
<div><input type="button" value="現タイプを削除" onclick="chgMT1()" /></div>
 :
    var type1 = map.getCurrentMapType();
    function chgMT1(){ map.removeMapType(type1); } //現タイプを削除
    GEvent.addListener(map, 'removemaptype', function() {
        alert("地図タイプ「"+type1.getName()+"」を削除しました");
    });

サンプル
    //クリックした座標をダイアログ表示
    GEvent.addListener(map, 'click', function(overlay, point){
      alert(point);
    });

    GEvent.addListener(map, 'movestart', function(){ });

    GEvent.addListener(map, 'moveend', function(){ });

    GEvent.addListener(map, 'move', function(){ });

    GEvent.addListener(map, 'zoomend', function(oldZoomLevel,newZoomLevel ){ });

    GEvent.addListener(map, 'maptypechanged', function(){ });

    GEvent.addListener(map, 'infowindowopen', function(){ });

    GEvent.addListener(map, 'infowindowclose', function(){ });

    GEvent.addListener(map, 'addoverlay', function(overlay){ });

    GEvent.addListener(map, 'removeoverlay', function(overlay){ });

    GEvent.addListener(map, 'clearoverlays', function(){ });

    GEvent.addListener(map, 'mouseover', function(latlng){ });

    GEvent.addListener(map, 'dragstart', function(latlng){ });

    GEvent.addListener(map, 'dragend', function(latlng){ });

    GEvent.addListener(map, 'load', function(){ });

class GMapOptions

このクラスは、 GMap2 コンストラクタのオプション引数です。 コンストラクタは持ちませんが、オブジェクト・リテラルとしてのインスタンスです。 (訳注:オブジェクト・リテラルはJavaScriptの記述方法で、{ hoge1:123,hoge2:456 } のような{プロパティ名:値,プロパティ名:値,...}という書き方でオブジェクトを表現します。)

Properties

サンプル
<div id="map" style="width:100px;height:100px"></div>
  :
    //width:100px;height:100pxではなくwidth:500px;height:200pxのサイズになります
    var map = new GMap2(document.getElementById("map"),{
                 size : new GSize(500, 200)
              });
    map.setCenter(new GLatLng(35.65872,139.7454), 17);

サンプル
<div id="map" style="width:100px;height:100px"></div>
 :
    //width:100px;height:100pxではなくwidth:500px;height:200pxのサイズになります
    var map = new GMap2(document.getElementById("map"),{
                 size : {width:500,height:200}
              });
    map.setCenter(new GLatLng(35.65872,139.7454), 17);

サンプル
    //画面上のコントロールはmapTypes配列に指定した順になります。
    var map = new GMap2(document.getElementById("map"),{
                 size : {width:500,height:200},
                 mapTypes : [G_SATELLITE_MAP,G_NORMAL_MAP]
              });
    map.setCenter(new GLatLng(35.65872,139.7454), 17);
    map.addControl(new GMapTypeControl());

サンプル
    //ドラッグ可能時のカーソルをcrosshair
    var map = new GMap2(document.getElementById("map"),{
      draggableCursor: 'crosshair'
    });
       :
    <input type="button" value="ドラッグ可" onclick="map.enableDragging()" />
    <input type="button" value="ドラッグ不可" onclick="map.disableDragging()" />

サンプル
    //ドラッグ可能時のカーソルをcrosshair、ドラッグ中をpointer
    var map = new GMap2(document.getElementById("map"),{
      draggableCursor: 'crosshair',draggingCursor: 'pointer'
    });
       :
    <input type="button" value="ドラッグ可" onclick="map.enableDragging()" />
    <input type="button" value="ドラッグ不可" onclick="map.disableDragging()" />

enum GMapPane

これらの定数は、オーバーレイ群を地図に表示するための階層システムを定義します。 それは、アイコンや影や情報ウインドウやそのウインドウの影やマウスイベントを捉えるための透明な オブジェクトなどの異なるレイヤー群です。

GOverlayからのサブクラス ならこのタイプを使用する必要があります。

Constants

サンプル
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.65872,139.7454), 17);
    var div = document.createElement("div");
    div.style.border   = "2px solid orange";
    div.innerHTML      = "G_MAP_MAP_PANEです";
    map.getPane(G_MAP_MAP_PANE).appendChild(div);//G_MAP_MAP_PANEへdivを追加します

class GKeyboardHandler

このクラスからインスタンス を生成すると 地図にキーボードバインディングを追加します。

Constructor

サンプル
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.65872,139.7454), 17);
    var kh = new GKeyboardHandler(map);

interface GOverlay

このインターフェイスは、 GMarker, GPolyline, や GInfoWindow などのクラスによって実装されています。 カスタムオーバーレイオブジェクトを表示したい場合に実装することもできます。 GOverlay のインスタンスは、 GMap2.addOverlay()のメソッドによって地図上へ置かれます。 そして、地図は初めに、地図上へ表示するためのオーバレイ・インスタンスのメソッド GOverlay.initialize()を呼びます。 地図表示が変化するときはいつも、地図は、必要なら、オーバレイがそれ自体の位置を変えることができるように、 GOverlay.redraw() を呼びます。 オーバレイのインスタンスは、所属するDOMのコンテナ要素を得るメソッド GMap2.getPane() を使用できます。

Constructor

サンプル
    var ovly = new GOverlay();
    document.write("クラス:" +GOverlay + ",インスタンス:" + ovly);
    // クラス:function Da(){},インスタンス:[object Object]  と表示されます
    // つまり、クラス GOverlayは空のDa()という名前の関数です。
    // (この内部関数「Da」の名前や内容は、今後変わる可能性があります。2006.6.26現在)

Static Methods

サンプル
    document.write(GOverlay.getZIndex(35.65872));
    // -3565872 を返します。
    //(インスタンス.getZIndex(緯度)ではなくGOverlay.getZIndex(緯度)と書きます)

Abstract Methods

サンプル
<input type="button" value="オーバーレイを追加" onclick="addMaker(TestOvy)" />
<input type="button" value="オーバーレイを削除" onclick="test.remove()" />
  :
    var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(35.65872,139.7454), 17);
    function TestOvy() {}
    TestOvy.prototype = new GOverlay();
    TestOvy.prototype.initialize = function(map) {
      //DIV生成とペインへの書き出し
      var div = document.createElement("div");
      div.style.border = "8px solid orange" ;
      div.style.position = "absolute";
      map.getPane(G_MAP_MAP_PANE).appendChild(div);
      this._div = div;
      alert("oj.initializeが呼ばれました")
    }
    TestOvy.prototype.remove = function() {
      //削除
      this._div.parentNode.removeChild(this._div);
    }
    TestOvy.prototype.copy = function() {
      //コピー
      return new TestOvy();
    }
    TestOvy.prototype.redraw = function(force) {
      //再描画
      if (!force) return;  //forceがfalseなら(つまり地図が動いていなければ)動作しません
      this._div.style.width = "70px";
      this._div.style.height = "50px";
      this._div.style.left = "10px";
      this._div.style.top = "10px";
    }
    //インスタンス生成
    var test = new TestOvy();
    //オーバーレイを追加
    var addMaker = function() {
        map.addOverlay(test);
    }

class GInfoWindow

GInfoWindowはコンストラクタを 持ちません。地図によって生成され、メソッド GMap2.getInfoWindow() によってアクセスされます。

Methods

サンプル
<input type="button" value="タブ2を選択"
       onclick="map.getInfoWindow().selectTab(1)" /> //タブ#2を開きます
  :
    var infoTabs = [
      new GInfoWindowTab("Tab #1", ">p>>b>Tab1>/b>です>/p>"),
      new GInfoWindowTab("Tab #2", ">p>>b>Tab2>/b>です>/p>")
    ];
    //タブ付き情報ウインドウオープン
    map.openInfoWindowTabsHtml(new GLatLng(35.65872,139.7454),infoTabs);

サンプル
<input type="button" value="ウインドウ非表示"
       onclick="map.getInfoWindow().hide()" /> //閉じます
<input type="button" value="ウインドウ表示"
       onclick="map.getInfoWindow().show()" /> //開きます
  :
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.65872,139.7454), 17);
    //情報ウインドウオープン
    map.openInfoWindowHtml(new GLatLng(35.65872,139.7454),'>p>>b>HTML>/b>です>/p>');

サンプル
>input type="button" value="ウインドウは非表示？"
       onclick="alert(map.getInfoWindow().isHidden())" /> //閉じていればtrueが表示されます
  :
    //情報ウインドウオープン
    map.openInfoWindowHtml(new GLatLng(35.65872,139.7454),'>p>>b>HTML>/b>です>/p>');

サンプル
>input type="button" value="リセット"
           onclick="resetInfo()" />
  :
    function resetInfo(){
      var info   = map.getInfoWindow();
      var gpoint = new GLatLng(35.65872,139.7454);
      var size   = {width:120,height:150}; //サイズが変更されます
      info.reset(gpoint, info.tabs, size);
    }

サンプル
<input type="button" value="getPoint"
           onclick="alert(map.getInfoWindow().getPoint())" /> //(35.65872,139.7454)が表示されます
  :
    //情報ウインドウオープン
    map.openInfoWindowHtml(new GLatLng(35.65872,139.7454),'
HTMLです
');

サンプル
<input type="button" value="getPixelOffset"
           onclick="alert(map.getInfoWindow().getPixelOffset())" />  //(8,4)が表示されます
  :
    map.openInfoWindowHtml(new GLatLng(35.65872,139.7454),'test',{
        pixelOffset: new GSize(8,4)
    });

サンプル
<input type="button" value="getSelectedTab"
           onclick="alert(map.getInfoWindow().getSelectedTab())" />   //選択されているタブのindexが表示されます
  :
    var infoTabs = [
      new GInfoWindowTab("Tab #1", "Tab1(indexは0)です"),
      new GInfoWindowTab("Tab #2", "Tab2(indexは1)です")
    ];
    //タブ付き情報ウインドウオープン
    map.openInfoWindowTabsHtml(new GLatLng(35.65872,139.7454),infoTabs);

Events

サンプル
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.65972,139.7454), 17);
    map.openInfoWindowHtml(new GLatLng(35.65872,139.7454),
        '<p style="width:180px">右の[×]をクリックするとメッセージ表示</p>');
    //情報ウインドウが閉じるとメッセージが表示されます
    GEvent.addListener(map.getInfoWindow(), "closeclick", function() {
        alert("閉じました");
    });

class GInfoWindowTab

このクラスのインスタンスによる配列は、 GMap2.openInfoWindowTabs(), GMap2.openInfoWindowTabsHtml(), GMarker.openInfoWindowTabs(), や GMarker.openInfoWindowTabsHtml() の各メソッドから渡される引数 tabs です。 この配列が、複数のインスタンスを含むとき、情報ウインドウにはタブが表示されます。 すべてのInfoWindowTabオブジェクトは、 二つのアイテムを含みます: contentは、タブが選択された時の情報ウインドウの中身を定義し、 labelは、タブのラベルを定義します。 これらのプロパティは、引数としてコンストラクタに渡されます。 openInfoWindowTabs() メソッドのための contentは、DOM ノードで渡し、 openInfoWindowTabsHtml()メソッドのための contentは、HTML文字列で渡します。

Constructor

サンプル
    var tabs = [
      new GInfoWindowTab("タブ1", "これは、タブ1です。"),
      new GInfoWindowTab("タブ2", "これは、タブ2です。")
    ];
    //タブ付き情報ウインドウオープン
    map.openInfoWindowTabsHtml(new GLatLng(35.65872,139.7454),tabs);

class GInfoWindowOptions

このクラスのインスタンスは、 GMap2 と GMarkerクラスの 次の各メソッドの引数opts?として使われます。 openInfoWindow(), openInfoWindowHtml(), openInfoWindowTabs(), openInfoWindowTabsHtml(), と showMapBlowup() このクラスのためのコンストラクタはありません。 このクラスはjavascriptオブジェクト・リテラルとしてのインスタンスです。 (訳注:オブジェクト・リテラルはJavaScriptの記述方法で、{ hoge1:123,hoge2:456 } のような{プロパティ名:値,プロパティ名:値,...}という書き方でオブジェクトを表現します。)

Properties

GInfoWindowOptionsのクラス名が示すとおり、これらすべてのプロパティはオプション(省略可能)です。

サンプル
    var infoTabs = [
      new GInfoWindowTab("Tab #1", "<p><b>Tab1</b>が選択されています</p>"),
      new GInfoWindowTab("Tab #2", "<p><b>Tab2</b>が選択されています</p>")
    ];
    //openInfoWindow*メソッドの第三引数用selectedTabを指定します
    var opts = { selectedTab : 1 };
    //タブ付き情報ウインドウオープン
    map.openInfoWindowTabsHtml(new GLatLng(35.65872,139.7454),infoTabs,opts);

サンプル
    //openInfoWindow*メソッドの第三引数用maxWidthを指定します
    var opts = { maxWidth : 300 };
    //タブ付き情報ウインドウオープン
    map.openInfoWindowHtml(
            new GLatLng(35.65872,139.7454),
            'maxWidthを指定すると情報ウインドウの幅を指定できます。',
            opts
    );

サンプル
    //openInfoWindow*メソッドの第三引数用onOpenFnとonCloseFnを指定します
    var opts = {
      onOpenFn  : function(){ alert('開きました'); } ,
      onCloseFn : function(){ alert('閉じました'); } 
    };
    //タブ付き情報ウインドウオープン
    map.openInfoWindowHtml(
            new GLatLng(35.65872,139.7454),
            'テスト',
            opts
    );

サンプル
    //クローズアップウインドウをG_SATELLITE_MAPでオープン
    map.showMapBlowup(
      new GLatLng(35.65872,139.7454),
      { mapType : G_SATELLITE_MAP }
    );

サンプル
    //クローズアップウインドウをズーム3、G_SATELLITE_MAPでオープン
    map.showMapBlowup(
      new GLatLng(35.65872,139.7454),
      {
        mapType   : G_SATELLITE_MAP,
        zoomLevel : 3
      }
    );

class GMarker

GMarker は、 地図上の位置をマークします。 GMap2.addOverlay()メソッドを使い地図上へ追加することで、 GOverlayインターフェイスを実装します。

マーカーオブジェクトは、マーカーが設置された地理的な位置についての pointと iconを持っています。 もし、iconがセットされていなければ、 デフォルトアイコン G_DEFAULT_ICONが使用されます。

地図にこれが追加された後に、(訳注:マーカー用の)情報ウインドウはこのマーカーを通じて開くことができるようになります。 マーカーオブジェクトは、マウスイベントや情報ウインドウのイベントによって動作します。

Constructor

サンプル
    //title属性付きのマーカーを生成します
    var marker = new GMarker(new GLatLng(35.65872,139.7454),{title:'テスト'});
    map.addOverlay(marker);
    //マーカークリックで情報ウインドウを開きます
    GEvent.addListener(marker, "click", function() {
       marker.openInfoWindowHtml('test');
    });

Methods

以下のメソッドが呼び出される前に、マーカーが地図へ追加されていなければなりません。

サンプル
<div id="msg">情報ウインドウです。</div>
  :
    //マーカーを生成します
    var marker = new GMarker(new GLatLng(35.65872,139.7454));
    map.addOverlay(marker);
    //マーカークリックで情報ウインドウを開きます
    GEvent.addListener(marker, "click", function() {
       marker.openInfoWindow(
         //id名"msg"の要素の内容を情報ウインドウへ表示します
         document.getElementById("msg")
       );
    });

サンプル
    //マーカーを生成します
    var marker = new GMarker(new GLatLng(35.65872,139.7454));
    map.addOverlay(marker);
    //マーカークリックで情報ウインドウを開きます
    GEvent.addListener(marker, "click", function() {
       marker.openInfoWindowHtml("<p>HTMLです</p>");
    });

サンプル
<div id="tab1">TEST 1</div>
<div id="tab2">TEST 2</div>
  :
    //マーカーを生成します
    var marker = new GMarker(new GLatLng(35.65872,139.7454));
    map.addOverlay(marker);
    //マーカークリックでタブ付き情報ウインドウを開きます
    GEvent.addListener(marker, "click", function() {
      marker.openInfoWindowTabs([
        new GInfoWindowTab("タブ1", document.getElementById("tab1")),
        new GInfoWindowTab("タブ2", document.getElementById("tab2"))
      ]);
    });

サンプル
    //マーカーを生成します
    var marker = new GMarker(new GLatLng(35.65872,139.7454));
    map.addOverlay(marker);
    //マーカークリックでタブ付き情報ウインドウを開きます
    GEvent.addListener(marker, "click", function() {
      marker.openInfoWindowTabsHtml([
        new GInfoWindowTab("タブ1", "Tab1"),
        new GInfoWindowTab("タブ2", "Tab2")
      ]);
    });

サンプル
    var marker = new GMarker(tokyo,{draggable:true});
    map.addOverlay(marker);
      :
    <input type="button" value="ドラッギングできなくなります"
                         onclick="marker.disableDragging()" />
    <input type="button" value="ドラッギングできるようになります"
                         onclick="marker.enableDragging()" />

サンプル
    var marker = new GMarker(tokyo,{draggable:true});
    map.addOverlay(marker);
      :
    <input type="button" value="ドラッギングできなくなります"
                         onclick="marker.disableDragging()" />

サンプル
    <input type="button" value="draggableプロパティが初期化されていればtrue"
                         onclick="alert(marker.draggable())" />

サンプル
    <input type="button" value="ドラッギング可能ならtrue"
                         onclick="alert(marker.draggingEnabled())" />

Events

これらのイベントは、マーカーのinertフラグが無効でなければ 動作します。(constructorを参照)

サンプル
    //マーカークリックでダイアログを開きます
    GEvent.addListener(marker, 'click', function() {
      alert('クリックされました');
    });

サンプル
    //地図とマーカークリックでダイアログを開きます
    GEvent.addListener(map, 'click', function() {
       alert("クリックされました");
    });
サンプル
    //マーカークリックでダイアログを開きます
    GEvent.addListener(marker, 'dblclick', function() {
      alert('クリックされました');
    });

    GEvent.addListener(marker, 'mousedown', function(){ });

    GEvent.addListener(marker, 'mouseup', function(){ });

    GEvent.addListener(marker, 'mouseover', function(){ });

    GEvent.addListener(marker, 'mouseout', function(){ });

    GEvent.addListener(marker, 'infowindowopen', function(){ });

    GEvent.addListener(marker, 'infowindowclose', function(){ });

    GEvent.addListener(marker, 'remove', function(){ });

サンプル
    //マーカードラッグ開始で、現在開いている情報ウィンドウを閉じます
    GEvent.addListener(marker, 'dragstart', function() {
       map.closeInfoWindow();
    });

サンプル
    //マーカードラッグ中に発生し続けます
    GEvent.addListener(marker, 'drag', function() {
       GLog.write(marker.getPoint());
    });

サンプル
    //マーカードラッグ終了で情報ウィンドウを開き、その座標を表示します
    GEvent.addListener(marker, 'dragend', function() {
      var point = marker.getPoint();
      marker.openInfoWindowHtml(point+'です');
    });

class GMarkerOptions

このクラスのインスタンスは、 GMarker クラスのコンストラクタへの引数opts? として使われます。 このクラスのためのコンストラクタはありませ。代わりに、このクラスはJavaScriptのオブジェクトリテラル としてインスタンス化されます。 (訳注:オブジェクト・リテラルはJavaScriptの記述方法で、{ hoge1:123,hoge2:456 } のような{プロパティ名:値,プロパティ名:値,...}という書き方でオブジェクトを表現します。)

Properties

GInfoWindowOptionsのクラス名が示すとおり、これらすべてのプロパティはオプション(省略可能)です。

サンプル
    //アイコン作成
    var icon1 = new GIcon();
    icon1.image = "./yazirusi.png";  //アイコン画像
    icon1.shadow = "./shadow.png"; //影の画像
    icon1.iconSize = new GSize(20, 34);    //アイコンサイズ
    icon1.shadowSize = new GSize(37, 34); //影のサイズ
    //アンカーポイントと画像の左上角からの相対オフセット値
    icon1.iconAnchor = new GPoint(10,34);
    //icon1でマーカーを生成します
    var marker = new GMarker(new GLatLng(35.65872,139.7454),{
      icon: icon1
    });
    map.addOverlay(marker);

サンプル
    //title属性付きマーカーを生成します
    var marker = new GMarker(new GLatLng(35.65872,139.7454),{
      title: "マーカーです"
    });
    map.addOverlay(marker);

サンプル
    //draggable属性付きマーカーを生成します
    var marker = new GMarker(tokyo,{ draggable:true });
    map.addOverlay(marker);

サンプル
    //draggableとbouncy属性付きマーカーを生成します。ドラッグ後バウンドしません。
    var marker = new GMarker(tokyo,{
            draggable : true ,
            bouncy    : false
    });
    map.addOverlay(marker);

サンプル
    //マーカーをドラッグ後のバウンドが、デフォルト1より少し早くなります。
    var marker = new GMarker(tokyo,{
            draggable     : true ,
            bouncy        : true ,
            bounceGravity : 4
    });
    map.addOverlay(marker);

class GPolyline

これは、地図上にポリラインを描画するオーバーレイです。もし、利用できるなら、 ブラウザのベクター描画実装を利用し、駄目なら、Googleサーバからの画像を利用します。

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 GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.65872,139.7454), 12);
    var tkytw = new GLatLng(35.65872,139.7454);//東京タワー
    var daiba = new GLatLng(35.62807,139.7753);//台場
    //線分のポイント座標配列を作成
    var points = [];
    points.push(tkytw);//東京タワー
    points.push(daiba);//台場
    //ポリラインを描画
    map.addOverlay(new GPolyline(points,'#000000',5,0.7));
    //マーカーを追加
    map.addOverlay(new GMarker(tkytw));
    map.addOverlay(new GMarker(daiba));

Methods

サンプル
var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.6350,139.7632), 12);
    var tkytw   = new GLatLng(35.65872,139.7454);//東京タワー
    var hamarky = new GLatLng(35.65975,139.7632);//浜離宮
    var daiba   = new GLatLng(35.62807,139.7753);//台場
    //線分のポイント座標配列を作成
    var points = [];
    points.push(tkytw);//東京タワー
    points.push(hamarky);//東京タワー
    points.push(daiba);//台場
    //ポリラインを描画
    var ply1 = new GPolyline(points,'#ff5500',5,0.7);
    map.addOverlay(ply1);
    alert("ポリラインの頂点数は、"+ply1.getVertexCount()+"です");

サンプル
    alert("ポリラインの最初の頂点座標は、"+ply1.getVertex(0)+"です");

Events

サンプル
    //ポリラインを描画
    var ply1 = new GPolyline(points,'#ff5500',5,0.7);
    map.addOverlay(ply1);
    //ポリラインが消えると動作します
    GEvent.addListener(ply1, "remove", function() {
        alert("ポリラインが削除されました");
    });
         :
    <input type="button" value="ポリラインを削除" onclick="map.removeOverlay(ply1)" />

class GIcon

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

Constructor

サンプル
var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.65872,139.7454), 17);
    //アイコン作成
    var icon = new GIcon();
    icon.image = "./yazirusi.png";  //アイコン画像
    icon.shadow = "./shadow2.gif"; //影の画像
    icon.iconSize = new GSize(20, 34);    //アイコンサイズ
    icon.shadowSize = new GSize(37, 34); //影のサイズ
    icon.printImage = "./yazirusi.gif";
    icon.mozPrintImage = "./yazirusi.gif";
    icon.printShadow = "./shadow2.gif";
    //アンカーポイントと画像の左上角からの相対オフセット値
    icon.iconAnchor = new GPoint(10,34);
    //マーカーオブジェクト生成
    var marker = new GMarker(new GLatLng(35.65872,139.7454),{
      icon: icon
    });
    map.addOverlay(marker);

サンプル
    //ベースアイコン作成
    var baseIcon = new GIcon();
    baseIcon.shadow = "./shadow2.gif";
    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 = "./a.png";
    icon2.image = "./b.png";
    //マーカーオブジェクト生成
    var marker1 = new GMarker(new GLatLng(35.65872,139.7454),{
      icon: icon1
    });
    var marker2 = new GMarker(new GLatLng(35.65882,139.7464),{
      icon: icon2
    });
    map.addOverlay(marker1);
    map.addOverlay(marker2);

Constants

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

class GPoint

A GPoint は、地図上の位置をピクセル座標で表します。注意、v2では、地球上の地理的座標は表しません。 地理的座標は、現在は、GLatLngで表します。

この地図座標系では、x座標が左方向へ増加します、そして、y座標が下向きに増加します。

Notice that while the two parameters of a GPoint are accessible as properties x and y, it is better to never modify them, but to create a new object with different paramaters instead.

Constructor

サンプル
    //アンカーポイントと画像の左上角からの相対オフセット値 を50,50pxにする
    icon.iconAnchor = new GPoint(50,50); //アイコンが左上へずれます

Properties

サンプル
    icon.iconAnchor = new GPoint(50,50);
    //x:50 y:50と表示されます
    alert("x:"+icon.iconAnchor.x+" y:"+icon.iconAnchor.y);

Methods

サンプル
    a = new GPoint(30,50);
    b = new GPoint(30,50);
    //trueと表示されます
    alert(a.equals(b));

サンプル
    a = new GPoint(30,50);
    //(30,50)と表示されます
    alert(a.toString());

class GSize

A GSize は、地図上の長方形のエリアのサイズをピクセルで返します。 サイズオブジェクトは、 width と heightの 2つのパラメータを持っており、 widthは、x-座標の差分であり、heightは、y-座標の差分です。

Notice that while the two parameters of a GSize are accessible as properties width and height, it is better to never modify them, but to create a new object with different paramaters instead.

Constructor

Properties

サンプル
    //アイコン作成
    var icon = new GIcon();
    icon.image = "./yazirusi.png";  //アイコン画像
    icon.shadow = "./shadow2.gif"; //影の画像
    icon.iconSize = new GSize(20, 34);    //アイコンサイズ
    icon.shadowSize = new GSize(37, 34); //影のサイズ
    //width:20 height:34 と表示されます
    alert("width:"+icon.iconSize.width+" height:"+icon.iconSize.height);

Methods

サンプル
    a = new GSize(30,50);
    b = new GSize(30,50);
    //trueと表示されます
    alert(a.equals(b));

サンプル
    a = new GSize(30,50);
    //(30,50)と表示されます
    alert(a.toString());

class GBounds

GBoundsは、 地図上の長方形の領域をピクセル座標であらわします。 注意、地理的座標の長方形は、 このGBounds ではなく、 GLatLngBounds によって表します。

Constructor

Properties

Methods

サンプル
var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.65872,139.7454), 17);
    bound = new GBounds( 0, 100,  200,  0);

サンプル
    //((0,100),(200,0))と表示されます
    alert(bound.toString());

サンプル
    //(0,100)と表示されます
    alert(bound.min());

サンプル
    //(200,0)と表示されます
    alert(bound.max());

サンプル
    a = new GBounds( 10,100, 200, 0);
    b = new GBounds( 0 , 20, 300, 10);
    //trueと表示されます
    alert(b.containsBounds(a));

サンプル
    area1 = new GBounds(10,50,50,0);
    point1 = new GPoint(100,100);
    area1.extend(point1);
    //((10,50),(100,100))と表示されます。つまり、50,0が100,100へ拡張されました。
    alert(area1.toString());

サンプル
    a = new GBounds( 8,100, 12, 0);
    b = new GBounds( 0 ,500, 300, 18);
    //((8, 0), (12, 500))  と表示されます。
    alert(GBounds.intersection(a,b).toString());

class GLatLng

GLatLngは、 地理的座標の経度と緯度です。

注意、 普通の地図投影法は、経度を地図のx-座標、およびy-座標を緯度に関連づけます。地図学の慣例のように、 緯度latitude がいつも最初に書かれ、次に経度longitudeがきます。 (訳注:GLatLngはv2から使われていますが、v1でよく使われていたGPointの引数では経緯度の 順序が逆ですので注意が必要です)

注意、 また、GLatLngの座標を変更することができないのに注意してください。 別の座標を計算したいなら、新しいもうひとつを作成しなければなりません。

Constructor

サンプル
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.65872,139.74541), 17);

Methods

サンプル
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.65872,139.74541), 17);

サンプル
    var p1 = new GLatLng(35.65872,139.74541);
    map.setCenter(p1, 17);
    //lat:35.65872と表示されます
    alert("lat:"+p1.lat())

サンプル
    var p1 = new GLatLng(35.65872,139.74541);
    map.setCenter(p1, 17);
    //lat:139.74541と表示されます
    alert("lng:"+p1.lng())

サンプル
    var p1 = new GLatLng(35.65872,139.74541);
    map.setCenter(p1, 17);
    //latRadians:0.6223620710467524 と表示されます
    alert("latRadians:"+p1.latRadians());

サンプル
    var p1 = new GLatLng(35.65872,139.74541);
    map.setCenter(p1, 17);
    //lngRadians:2.4390175190494085 と表示されます
    alert("lngRadians:"+p1.lngRadians());

サンプル
    var p1 = new GLatLng(35.65872,139.74541);
    var p2 = new GLatLng(35.65872,139.74541);
    //equals:true と表示されます
    alert("equals:"+p1.equals(p2));

サンプル
    var tkytw = new GLatLng(35.65872,139.7454);//東京タワー
    var daiba = new GLatLng(35.62807,139.7753);//台場
    //東京タワーと台場の距離:4354.059047557723m と表示されます
    alert("東京タワーと台場の距離:"+tkytw.distanceFrom(daiba)+"m");

サンプル
    var tkytw = new GLatLng(35.65872,139.7454);//東京タワー
    map.setCenter(tkytw, 12);
    //35.65872,139.7454と表示されます
    document.write(tkytw.toUrlValue());

Properties

これらのプロパティはv1イベントハンドラ関数の互換性のためだけに存在しています。それらを使用するべきではありません。

これらのプロパティは、 lng() と lat() が返す値を反映した、 GPointがv1クライアントによって期待される 場所へ GLatLngを現れさせます。 GLatLng がイベントに現れるところ(イベントハンドラの引数など) でこれが必要になります。メソッドラッパーのように、イベントラッパーを作成するのは現在のインフラストラクチャで不可能です。

class GLatLngBounds

GLatLngBounds のインスタンスは、地理的座標の長方形を表します。including one that crosses the 180 degrees meridian.

Constructor

サンプル
var map = new GMap2(document.getElementById("map"));
    var tkytw = new GLatLng(35.65872,139.7454);//東京タワー
    var hamarky = new GLatLng(35.65975,139.7632);//浜離宮
    bound = new GLatLngBounds(tkytw,hamarky); //東京タワーと浜離宮に囲まれた領域
    //この領域が収まるズームレベルより1レベル引いたズームでセットします。
    map.setCenter(bound.getCenter(), map.getBoundsZoomLevel(bound));

Methods

サンプル
    var tkytw = new GLatLng(35.65872,139.7454);//東京タワー
    var hamarky = new GLatLng(35.65975,139.7632);//浜離宮
    bound1 = new GLatLngBounds(tkytw,hamarky);
    bound2 = new GLatLngBounds(tkytw,hamarky); //bound1と同じ領域
    //true が表示されます
    document.write(bound1.equals(bound2));

サンプル
    var tkytw = new GLatLng(35.65872,139.7454);//東京タワー
    var hamarky = new GLatLng(35.65975,139.7632);//浜離宮
    var bound1 = new GLatLngBounds(tkytw,hamarky);
    var test1 = new GLatLng(35.6573,139.7501);
    //(35.6573,139.7501)は含まれるので、true が表示されます
    document.write(bound1.contains(test1));

サンプル
    var tkytw = new GLatLng(35.65872,139.7454);//東京タワー
    var hamarky = new GLatLng(35.65975,139.7632);//浜離宮
    var bound1 = new GLatLngBounds(tkytw,hamarky);
    var rb = new GLatLng(35.6373,139.7569 );//レインボーブリッジ
    var tkyst = new GLatLng(35.6811,139.7678);//東京駅
    var bound2 = new GLatLngBounds(rb,tkyst);
    //重なるので、true が表示されます
    document.write(bound1.intersects(bound2));

サンプル
    var tkytw   = new GLatLng(35.65872,139.7454);//東京タワー
    var hamarky = new GLatLng(35.65975,139.7632);//浜離宮
    var bound1  = new GLatLngBounds(tkytw,hamarky);
    var eno     = new GLatLng(35.2994,139.4824);//江ノ島
    var tuku    = new GLatLng(36.0796,140.0969);//つくば
    var bound2  = new GLatLngBounds(eno,tuku);
    map.setCenter(bound1.getCenter(), map.getBoundsZoomLevel(bound1));
    //含まれるので、true が表示されます
    document.write(bound2.containsBounds(bound1));

サンプル
    var tkytw   = new GLatLng(35.65872,139.7454);//東京タワー
    var hamarky = new GLatLng(35.65975,139.7632);//浜離宮
    var bound1  = new GLatLngBounds(tkytw,hamarky);
    var tuku    = new GLatLng(36.0796,140.0969);//つくば
    bound1.extend(tuku);
    //北東方向が拡大された(36.079600000000006, 140.0969)が表示されます
    document.write(bound1.getNorthEast());

サンプル
    var tkytw = new GLatLng(35.65872,139.7454);//東京タワー
    var hamarky = new GLatLng(35.65975,139.7632);//浜離宮
    map.setCenter(tkytw, 17);
    bound = new GLatLngBounds(tkytw,hamarky);
    //長方形の南西コーナーの位置(35.65872, 139.7454)を返します。
    document.write(bound.getSouthWest());

サンプル
    var tkytw = new GLatLng(35.65872,139.7454);//東京タワー
    var hamarky = new GLatLng(35.65975,139.7632);//浜離宮
    map.setCenter(tkytw, 17);
    bound = new GLatLngBounds(tkytw,hamarky);
    //長方形の北東コーナーの位置(35.65975, 139.7632)を返します。
    document.write(bound.getNorthEast());

サンプル
    var tkytw = new GLatLng(35.65872,139.7454);//東京タワー
    var hamarky = new GLatLng(35.65975,139.7632);//浜離宮
    map.setCenter(tkytw, 17);
    bound = new GLatLngBounds(tkytw,hamarky);
    //経緯度の差分(0.0010300000000015134, 0.01780000000002739) を返します。
    document.write(bound.toSpan());

    bound.isFullLat();

    bound.isFullLng();

    bound.isEmpty();

サンプル
    var tkytw = new GLatLng(35.65872,139.7454);//東京タワー
    var hamarky = new GLatLng(35.65975,139.7632);//浜離宮
    bound = new GLatLngBounds(tkytw,hamarky);
    //領域の中心を地図の中心にします
    map.setCenter(bound.getCenter(), 14);

interface GControl

このインターフェイスはすべてのコントロールに実装されます。 カスタムコントロールを地図へ追加するためにも利用できます。 コントロールは、 GMap2.addControl() メソッドによって地図へ追加されます。

コントロールは、マップビューとの相対位置に配置されます。地図が動いてもコントロールは動きません。

Constructor

Methods

これらのメソッドは、コントロールが GMap2.addControl() によって地図に追加されるとき呼ばれます。 したがって、これらのメソッドはユーザーによって実装されますが、 ユーザーによって呼ばれるわけではありません。

class GControlPosition

このクラスはマップビューにおけるコントロールの位置について記述します。 それは、相対的な一角を示すコントロールの位置とその位置を決めるオフセットから成ります。 それは、メソッドGMap2.addControl()へ オプション引数positionを渡し、 メソッドGControl.getDefaultPosition() から返される値です。(訳注:第一引数に利用できる定数は下記GControlAnchor参照)

Constructor

サンプル
    //右下(右から5px,下から15px)へラージコントロールを表示
    map.addControl(  new GLargeMapControl(),
                     new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(5,15))
                   );

enum GControlAnchor

(訳注:コントロールがマップビュー上のどの位置に表示されるかについての、あらかじめ用意されている定数です GControlPositionの第一引数として利用できます)

Constants

class GControl

これらの インタフェースinterface GControlの実装が利用可能です。 These implementations of interface GControl are available.

Constructor

サンプル
var map = new GMap(document.getElementById("map"));
    map.setCenter(new GLatLng(35.65872,139.7454), 17);
    map.addControl(new GSmallMapControl());

サンプル
    map.addControl(new GLargeMapControl());

サンプル
    map.addControl(new GSmallZoomControl());

サンプル
    map.addControl(new GScaleControl());

サンプル
    map.addControl(new GMapTypeControl());

サンプル
    map.addControl(new GOverviewMapControl());

class GMapType

ここにはいくつかの事前に定義されたマップタイプがあります。 このクラスは、カスタムマップタイプを作成するためにも利用できます。 これらを GMap2コンストラクタ かGMap2.addMapType()メソッドを使い、 地図に渡してください。

また、このクラスはサブクラスにすることもできます。 prototypeによってインスタンス化されるならコンストラクタの引数は省略できます。 サブクラスコンストラクタは、call() を使用することでGMapType コンストラクタを呼び出さなければなりません。

Constructor

Methods

これらのメソッドは、ほとんどの場合、マップタイプが渡される地図によって呼ばれます。 ただし、getBoundsZoomLevel()などにより、 地図以外から呼ばれることもあります。

Constants

Events

class GMapTypeOptions

このクラスのインスタンスは GMapType の引数opts?に使われます。 このクラスのためのコンストラクタはありません。 代わりに、このクラスは、 javascriptオブジェクト・リテラルとしてのインスタンス化されます。 (訳注:オブジェクト・リテラルはJavaScriptの記述方法で、{ hoge1:123,hoge2:456 } のような{プロパティ名:値,プロパティ名:値,...}という書き方でオブジェクトを表現します。)

Properties

interface GTileLayer

カスタム地図のタイルレイヤーを提供するためにこのインタフェースを実装します。 このインターフェイスの実装は、プロトタイプとして GTileLayer のインスタンスを使用するべきです。 これが、あなたのためのcopyrightの取り扱いを実装するからです。

Constructor

サンプル
    var tilelayer = new GTileLayer(new GCopyrightCollection(),0,15);
    tilelayer.getTileUrl = function(tile, zoom) {
      //自作画像をタイルとして重ねます
      return "./test.png";
    };
    tilelayer.getOpacity = function() {return 0.3}
    map.addOverlay(new GTileLayerOverlay(tilelayer));
サンプル
    var tilelayer = new GTileLayer(new GCopyrightCollection(),0,15);
    tilelayer.getTileUrl = function(tile, zoom) {
       //衛星画像G_SATELLITE_MAPをタイルとして重ねます
       return G_SATELLITE_MAP.getTileLayers()[0].getTileUrl(tile, zoom);
    };
    tilelayer.getOpacity = function() {return 0.3}
    map.addOverlay(new GTileLayerOverlay(tilelayer));

Methods

これらのメソッドは、このタイルレイヤーが渡される地図とマップタイプによって呼ばれます。 カスタムタイルレイヤーを実装するときには抽象メソッドを与える必要があります。

Events

class GCopyrightCollection

カスタムマップタイプの地図上に表示する 著作権メッセージを管理するのにこのクラスを使用します。 このクラスを使わなければ、カスタムマップタイプは実装できません。 copyrightコレクションはどのズームレベルで地図の上のどの領域に どのcopyrightを表示したらよいかに関する情報を含んでいます。 これは、衛星画像地図などのように異質なデータを表示するマップタイプの実装にとって重要です。

Constructor

Methods

Events

class GCopyright

copyrightオブジェクトは、 著作権メッセージが、与えられたズームレベルで、 地図上の長方形によって与えられた領域に適用される情報を含んでいます。 カスタムマップタイプかタイルレイヤーを与える場合にだけ、このオブジェクトが必要です。

Constructor

Properties

interface GProjection

これは地図投影法のためのインタフェースです。 地図投影法インスタンスはGMapType のコンストラクタに渡されます。 このインタフェースはクラス class GMercatorProjection によって実装されます。 (class GMercatorProjection はすべての事前に定義された地図タイプによって使用されます)。 異なった地図投影法で地図タイプを定義したいなら、このインタフェースを実装することができます。

Methods

これらのメソッドは地図によって呼ばれます。 あなたは、それらを実装する必要があります。

class GMercatorProjection

このメルカトル(投影)図法のための GProjection インターフェイス実装は、 すべての事前定義されるマップタイプで使用されます。 (通常、これは低ズームレベルで起こります。)

Constructor

Methods

namespace GEvent

この名前空間は、DOMイベントとカスタムイベントのために イベントハンドラを登録し発生させるための関数を含んでいます。 このAPIによって定義されたすべてのイベントが GEvent.triggerEvent()によって 内部的に発生させるカスタムイベントです。

Static Methods

サンプル
var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.65872,139.7454), 17);
    //クリックした座標をダイアログ表示//(35.65883049133227, 139.74543929100037)などが表示されます
    GEvent.addListener(map, 'click', function(overlay, point){
      GLog.write(point);
    });

サンプル
    test = GEvent.addListener(map, 'click', function(){
      alert(1);
    });
    setTimeout(function(){
      //5秒後にイベントを削除します
      GEvent.removeListener(test);
    },5000)

サンプル
    test = GEvent.addListener(marker, 'click', function(){
      alert(1);
    });
       :
    <input type="button"
             value="marker上のclickイベントを削除します"
             onclick="GEvent.clearListeners(marker,'click')" />

サンプル
    var marker1 = new GMarker(map.getCenter());
    var marker2 = new GMarker(new GLatLng(35.6586,139.7453));
    map.addOverlay(marker1);
    map.addOverlay(marker2);
    GEvent.addListener(map, 'click', function(a){
      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, onMapMove);
    function onMapMove(){
      //GLogウインドウへ中心座標を表示します
      GLog.write(map.getCenter());
    }

Events

class GEventListener

このクラスはopaqueです。 それは、メソッドもコンストラクタも持ちません。 そのインスタンスは、 GEvent.addListener() または GEvent.addDomListener() の戻り値です。 そして最後に、GEvent.removeListener() へ渡します。

namespace GXmlHttp

この名前空間は、クロスブラウザな方法で XmlHttpRequest インスタンスを作成するメソッドを提供します。

Static Methods

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

namespace GXml

この名前空間はXMLドキュメントとドキュメントフラグメントを扱う静的なメソッドを提供します。

Static Methods

サンプル
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.6587,139.7454), 17);
    var xml  ='';
        xml +='';
        xml +='  test1';
        xml +='  139.7454';
        xml +='  35.6587';
        xml +='';
    //XML文字列をパースしDOMを返します
    xmlDoc = GXml.parse(xml);
    xmlDocElm = xmlDoc.documentElement
    var lons = xmlDocElm.getElementsByTagName('lon')
    var lats = xmlDocElm.getElementsByTagName('lat')
    var lons = xmlDocElm.getElementsByTagName('lon')
    var lats = xmlDocElm.getElementsByTagName('lat')
    var lon = GXml.value(lons[0]); //lons[0].firstChild.nodeValueと等価
    var lat = GXml.value(lats[0]); //lats[0].firstChild.nodeValueと等価
    //xmlから取った座標へマーカーを表示します
    var point = new GLatLng(parseFloat(lat),parseFloat(lon));
    var marker = new GMarker(point);
    map.addOverlay(marker);

class GXslt

このクラスはブラウザから独立した方法でXSLTをXMLに適用するメソッドを提供します。

Static Methods

   xsl = GXslt.create(oj.responseXML);
   //受信
   xmlData = oj.responseXML ;
   //XMLをXSLTで変換し、結果のHTMLを出力
   xsl.transformToHtml( xmlData ,
                     document.getElementById('htmlContainer'));

namespace GLog

この名前空間はあなたがウェブアプリケーションをデバッグするのを助ける、 いくつかの静的なメソッドを含んでいます。 最初にwrite*()メソッドのひとつを使うとき フローティングウインドウが開きメッセージを書き出します。

Static Methods

サンプル
    GLog.write("あいうえお");//ログウィンドウにあいうえおが出力されます

サンプル
    GLog.write("http://jsgt.org/mt/01/");//ログウィンドウにURLへのリンクが出力されます

サンプル
    GLog.writeHtml("あい<b>う</b>えお");//ログウィンドウにHTMLが出力されます

class GDraggableObject

このクラスは、DOM要素をドラッガブルにします。 ドラッグカーソルを変えるための静的メンバーは、 結果として次に生成されるすべてのドラッガブルオブジェクトに影響を与えます。 (訳注:関数として利用した場合setDraggableCursorなどでセットされた引数cursorをインスタンスも利用します)。 各インスタンスは、それぞれのインスタンスだけで動作します。 例えば、地図を作成する前に、次のように呼び出せます(v2.56)。 GDraggableObject.setDraggableCursor('default') や GDraggableObject.setDraggingCursor('move') 。 利用できるカーソル値は、W3C CSS仕様を参照下さい。

Constructor

Static Methods

Methods

class GDraggableObjectOptions

このクラスは、 GDraggableObject コンストラクタの オプション引数です。このクラスのためのコンストラクタはありません。このクラスはjavascriptオブジェクト・リテラルとしてのインスタンスです。 (訳注:オブジェクト・リテラルはJavaScriptの記述方法で、{ hoge1:123,hoge2:456 } のような{プロパティ名:値,プロパティ名:値,...}という書き方でオブジェクトを表現します。)

Properties

enum GGeoStatusCode

Constants

class GClientGeocoder

このクラスは、geocodesをユーザの指定されたアドレスに入手するために Googleサーバと直接通信するのに使用されます。 さらに、geocoderはそれ自身のアドレスのキャッシュを維持します。 (それは、繰り返される質問が無駄な往来なしでサーバに答えられるのを許容します)。

Constructor

Methods

class GGeocodeCache

このクラスは、アドレスに対応するロケーション(位置)の地図を保持します。 このクラスは十分に機能的ですが、それは、 さらに高性能のキャッシュが引き出される基底クラスとして意図されます。

Constructor

Methods

class GFactualGeocodeCache

このクラスは、より厳しい状態をキャッシュされたリプライに置くことによって、基本的な GGeocodeCache のクラスを洗練します。 それは短期間以内にあまり変化しそうにないリプライをキャッシュするだけです。

Constructor

Methods

function GDownloadUrl

この関数はURLによって特定されたリソースを非同期に検索する便利な方法を提供します。 XmlHttpRequestオブジェクトがリクエストを実行するのに使用されるので、 それはクロスサイトのスクリプトを書くのと同じsame-origin制限を受けることに 注意してください。 すなわち、URLがこのコードを実行する現在のドキュメントのURLと同じサーバを示さなければなりません。 したがって、通常、url引数に絶対URLを使用するのは、冗長であり、 絶対的なものか相対パスだけを使用している方がよいです。

Function

function GBrowserIsCompatible

この関数は、現在のブラウザで地図APIを使用することができるかどうかを判定します。

Function

function GUnload

あなたは、地図APIがメモリを開放することで内部データをクリーンアップするために この関数を呼ぶことができます。 これは、ウェブアプリケーションにおけるメモリリークを引き起こす様々なブラウザバグ からあなたを助けます。 あなたは、この関数をあなたのページの unloadイベントハンドラで呼ぶべきです。 この関数が呼ばれた後に、ページ内へあなたが作成した地図オブジェクトは機能しなくなります。

Function

class GLatLng_tky

GLatLngクラスで日本測地系座標を使いたい場合用の代替クラス。 日本測地系座標を使いたい時は、GLatLngクラスの代わりに下記GLatLng_tkyを使用します。 世界測地系(wgs84)の座標を使うときは不要です。Methods、Propertiesは、GLatLngとまったく同じですのでそちらをご確認下さい。 (Thanx joeさん)

* このクラスは、訳者が便宜上勝手に作成したもので、Googleとは関係有りません。利用する際は クラスごと自分でコピーして実装する必要があります。使いたい方は、自己責任で勝手にご利用下さい。連絡不要、改造商用利用自由です。

Constructor

    GLatLng_tky = function (la,ln){
        var lat = la - la * 0.00010695  + ln * 0.000017464 + 0.0046017;
        var lng = ln - la * 0.000046038 - ln * 0.000083043 + 0.010040;
        return new GLatLng(lat,lng);
    }

サンプル
    GLatLng_tky = function (la,ln){
        var lat = la - la * 0.00010695  + ln * 0.000017464 + 0.0046017;
        var lng = ln - la * 0.000046038 - ln * 0.000083043 + 0.010040;
        return new GLatLng(lat,lng);
    }
    var map = new GMap2(document.getElementById("map"));
    //日本測地系座標で指定できます
    map.setCenter(new GLatLng_tky(35.65549,139.74862), 17);