TOP>Google>Google Maps API・DragZoomControl

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

導入方法は

  1. gmapユーティリティライブラリの真ん中辺・「DragZoom」にあるJavascript includeを右クリックで保存。
  2. 虫メガネ(アクティブ中)の画像は
    zoom-button.gif こちらは待機中の画像。
    zoom-button-activated.GIF アクティブ中の画像
  3. 1のライブラリをアップロードしてインクルード。
    <script src="アップロードしたディレクトリ/gzoom.js" type="text/javascript"></script>
  4. var map = new GMap2(document.getElementById("map"));の後に下記のコードを追加。
      /* その1:オーバーレイ・ボックスの設定*/
      var boxStyleOpts = {
        opacity: .2,
        border: "2px solid red"
      }
    
      /* その2:その他オプションの設定 */
      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));
    

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

オプションその1(boxStyleOptsに該当)

opacity
オーバーレイの透過度:0〜1の間。デフォルトは0.2。
fillColor
オーバーレイの色:デフォルトは#000(黒)。
border
ボックスの色:スタイルシートと同様の記述。デフォルトは"2px solid blue"。

オプションその2(otherOptsに該当)

buttonHTML
ズームボタン(待機中)のHTML:画像ファイルやテキストなど。
buttonStartingStyle
ズームボタンのCSS。
buttonStyle
待機中のズームボタンに適用されるCSS。デフォルトは{background :'#FFF'}
buttonZoomingHTML
ズームボタン(アクティブ中)のHTML。
buttonZoomingStyle
アクティブ中のズームボタンに適用されるCSS。デフォルトは{background :'#FF0'}
overlayRemoveTime
描画されたボックスを表示する時間(ミリ秒)。デフォルトは6000
stickyZoomEnabled
値がtrue→ズームモードの切り替えをせずに続けて使用できる。
値がfalse→一度ズームしたらズームモードは解除される。

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

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

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

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



posted by パンダ at 16:23 |Comment(3) | Google
ブックマークに追加: はてなブックマーク Yahoo!ブックマーク
この記事へのコメント
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
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

Google Maps API関連記事