GoogleMapの様な固定されたエリア内で、ドラッグしてスクロールを可能にする
インターフェースを、前からちょっとやってみたかったので、実験的に試してみました。

使用したライブラリは「jquery.scrollview.js」

jQueryScrollview.jpg
jquery-scrollview – Project Hosting on Google Code

このライブラリを使用することで、GoogleMapと同じ様な
・マウスドラッグでスクロール
・ダブルクリックした箇所にセンタリング
を実現することができます。(ズーム操作は不可)

参考サイトは
jQuery を用いて大きな画像などを Google Map ライクにスクロール表示する UI – Tosshi Note

実装は簡単ですがドラッグエリアをCSSでoverflowをscrollにしないといけないので
エリア自体にスクロールバーが表示されてしまったりなんだか微妙。。。

そこでドラッグエリアの上(スクロールバーの部分のみ)にpositionをabsoluteにした
空のボックスを重ねて強引に消す方法で何となくGoogleMapのインターフェースっぽくなってきました。

結果は以下の様に。(画像をドラッグしてみてください)

応用(?)として枠をiPhoneにしてみる。(得に意味はなし)

画像のデフォルトの配置位置が左上寄せでないのが気掛かり。。。

画像だけでなくコンテンツ、もしくはナビゲーションなどで
おもしろいインターフェースを作れないかな、と考え中。

何かよいアイディアがあれば是非お知らせください。。。