『入門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();
    });



サンプル


    //マーカードラッグ中に発生し続けます
    GEv