DragZoomControlからインスパイァーを受ける

GoogleMapを使っているサービスのブラウザ上ので座標から緯度/経度に変換する方法を探してネットの海をさまよっているうちに
http://nyanjiro.no-blog.jp/web20/2007/06/dragzoomcontrol_32db.html
でDragZoomControlというのを見つけた。選択開始コマンドのボタンを押すとGooleMapを描画しているDivタグの上に別レイヤーを重ねて画面上で範囲を決め、その範囲が収まるズームに変更してくれるAPI。

直接、このAPIを使うことはしないのだけど実現方法はなるほどね。と関心させられた。選択開始コマンドのボタンを押すと、GooleMapの上に、divタグを重ね合わせて半透明にしておく。このときは４つのdivタグを作っておいて、マウスで選択している範囲（最初にマウスをクリックした位置から、現在のマウスの位置）が中抜けになるように４つのdivタグの大きさと位置を調整する。そうすることで、半透明になっていない部分が選択範囲として見せることが出来る。ズーム後には表示されないので半透明にした部分は網掛けに見えるので、「ここは表示されないよ」という意味をもたせられる。

(　･∀･)つ〃∩ ﾍｪｰﾍｪｰﾍｪｰ