Google Maps API Blog「DragZoomControl v1.0: Easier zooming, coming right up!」に書いていたDragZoomControlを使ってみた。右上のGoogleMapsにある虫メガネがそれ。
メガネボタンを押すと、その大きさに合わせてズームできる。普通のズームボタンは一つ一つなのでかなり軽快な感じ。

導入方法は

1. gmapユーティリティライブラリの真ん中辺・「DragZoom」にあるJavascript includeを右クリックで保存。
2. 虫メガネ（アクティブ中）の画像は
   こちらは待機中の画像。
   アクティブ中の画像
3. 1のライブラリをアップロードしてインクルード。
   

   <script src="アップロードしたディレクトリ/gzoom.js" type="text/javascript"></script>

4. var map = new GMap2(document.getElementById("map"));の後に下記のコードを追加。
   

     /* その１：オーバーレイ・ボックスの設定*/
     var boxStyleOpts = {
       opacity: .2,
       border: "2px solid red"
     }
   
     /* その２：その他オプションの設定 */
     var otherOpts = {
       buttonHTML: "<img src='虫メガネの画像をアップロードしたディレクトリ/zoom-button.gif' />",
       buttonZoomingHTML: "<img src='虫メガネの画像をアップロードしたディレクトリ/zoom-button-activated.gif' />",
       buttonStartingStyle: {width: '24px', height: '24px'}
     };
   
     map.addControl(new DragZoomControl(boxStyleOpts, otherOpts));
   

もちろん色々なオプションが設定できるのでその詳細。

オプションその１（boxStyleOptsに該当）

opacity

オーバーレイの透過度：0〜1の間。デフォルトは0.2。

fillColor

オーバーレイの色：デフォルトは#000（黒）。

border

ボックスの色：スタイルシートと同様の記述。デフォルトは"2px solid blue"。

オプションその２（otherOptsに該当）

buttonHTML

ズームボタン（待機中）のHTML：画像ファイルやテキストなど。

buttonStartingStyle

ズームボタンのCSS。

buttonStyle

待機中のズームボタンに適用されるCSS。デフォルトは{background :'#FFF'}

buttonZoomingHTML

ズームボタン（アクティブ中）のHTML。

buttonZoomingStyle

アクティブ中のズームボタンに適用されるCSS。デフォルトは{background :'#FF0'}

overlayRemoveTime

描画されたボックスを表示する時間（ミリ秒）。デフォルトは6000

stickyZoomEnabled

値がtrue→ズームモードの切り替えをせずに続けて使用できる。
値がfalse→一度ズームしたらズームモードは解除される。

あと３つ目のオプションでコールバックが設定できる。

• ズームボタンが押された時：buttonclick
• ドラックが開始された時：dragstart
• ドラック中：dragging
• ドラックされている座標：dragend

シンプルに使うだけだと必要ないと思うのでここでは割愛。
詳しくはDragZoom V1.0 Referenceで。

とても便利なんだけど、一度の拡大幅が多いので逆に広域地図まで戻るのがちょっとメンドクサイ。コールバックを使ってマイナス方向に戻した時にズームアウトできればいいなぁと思いつつ、僕自身のやりたい事リストに入れては見るが、いつ実現するかは不明。

Comments

http://www.ero-douga.org/�@�G�����悪�������_�E�����[�h���������@<a href="http://www.ero-douga.org/">�����G������</a>

Posted by �����G����� at 2010年08月18日 09:13

こんな時だからこそ、生きてる内に思いっきり楽しんでおきたい…
不謹慎なんて言うなよな！いっちまったら何もできないんだから…(´・ω・｀)
http://ac8wlwo.glinds.info/

Posted by 備えあれば憂いナシ！！ at 2011年03月20日 12:55

ちょっとした、ドキドキがほしいな
http://r7naspe.love.chu-g.net/

Posted by 夏だからね at 2011年07月30日 22:31