Google Map Drag Zoom 機能(GMapDragZoom)

Google Map ドラッグズーム機能 Drag Zoom Control

ドラッグズームコントロールを使用したサンプルコードです。前回と同じくイベントリスナーで、マウスが離れるとコントロールが表示されなくなります。

This sample code used Drag Zoom control with some options, added eventlisteners "onmouseove" and "onmouseout" that is same as last article.

    GMapDragZoom = new DragZoomControl(
       {border:"1px  solid #FFFF00"},
       {buttonStartingStyle: {background:"#F4F4F4", border:"1px solid black"},
        buttonStyle: {width:"100px", height:"50px"} ,backButtonEnabled:true},
       {}
    );

    map.addControl(GMapDragZoom,
                 new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(70,10)));

map.addControl(new DragZoomControl());

これは、簡単なコードです。

サンプルコードは、このDragZoomControlの部分にオプションを追加しています。new DragZoomControl の部分を GMapDragZoom 変数に代入しています。
Abobe is the most simple code. I added a couple of options in a sample code, using a variable "GMapDragZoom".

map.addControl(new DragZoomControl({}, {}, {}));

ドラッグズームのオプションは、DragZoomControl({} ,{} ,{}); の{}の中に書き込みます。最初の、{}には、ドラッグズームした時のエリアのスタイルを設定します。"border:1px solid #FFFF00" はドラッグするエリアのボーダーを 1px の黄色に設定しています（スタイルを"dot"や "dash"にしてみましたが、solidしか使えないようです）。　次の{}には、地図に表示されるコントロールのスタイルと ズームする前のポジションにバックする（backButtonEnabled ）を設定します。３番目の{}には、イベント系の設定が出来ます。

試してみるといろんな発見が出来ると思いますが、キリがないので実際に使ってみて便利なものをサンプルコードしました。

The options are writen in three brackets "{}, {}, {}". The first bracket is used when setting up the style of the dragging area. "border 1px solid #FFFF00" set the dragging area 1px solid yellow. (I tried to use the border style "dot" or "dash" but it's not effectieve as shown on map.) The second bracket sets a style of control on map, and "backButtonEnabled" that is shown on the map after you drag areas. The third bracket is used when sets up events.

"addMapType(G_PHYSICAL_MAP);"を追加しています。地図のマップタイプの一番右に表示されています。