Google Maps::マーカーをDragして移動
August 11, 2006 6:45 PM by ooi1
大井宏友です。
Google Mapsがまたまたバージョンアップし、マーカーをDragして位置を移動することが「オフィシャルに」 できるようになりました。
実はその機能を既に解説されているページがあるように、 少し前からこの機能は存在しました。が、原文を読むと、 どうも隠し機能だった様で、本日のバージョンアップv2.61でオフィシャルな機能になったようです。
早速サンプルを作ってみました。
Drag対応は拍子抜けするほどカンタン
APIドキュメントやサンプルのソースを見ていただければお分かりかと思いますが、 MarkerをDrag対応するのはものすごくカンタンで、
var myMarker = new GMarker(point, {draggable: true});
と、GMarkerインスタンスを生成するときにdraggableプロパティをtrueにしてあげるだけ。これだけで、 Drag開始時にマーカーが持ち上がったりDrag終了時にマーカーがワンバウンドして着地するアニメーションつきでDragできるようになります。
またもしDrag開始時・終了時に何か処理を追加したいときは、 それぞれdragstart/dragendイベントを追加すればOK。
(8/12追記)ちなみにワンバウンドさせたくない場合は、
var myMarker = new GMarker(point, {draggable: true, bouncy: false});
と指定すればいいんですが、APIのドキュメントが間違っていて、何も指定しないときのbouncyのデフォルト値はtrueです。
さらに、バウンドの速度はbounceGravityプロパティで変更もできます。
ヒトは無意識のうちにDragしようとする!?
位置を指示したり登録したりするアプリケーションを作ってみたとき、 位置の微調整をしたいと思ったときにマーカーをDragしようとするヒトがいました。動かないことが分かっていても、 何回も同じようにDragしようとして、動かないことを再認識する。何となくですが、地図上のマーカーを見ていると、 人間は無意識のうちにDragできるものだと思ってしまうんでしょうかね。
確かに実際に今回のサンプルを作って動かしてみると、Dragして位置を変えるのが非常に気持ちいいし、自然に感じました。
TRACKBACKS
? Draggable, DayLight, Resize by 月と六ペソDraggable Marker、Day Lightmap と、Auto Sizenのグーグルマップ。