Google Mapみたいに画像を拡大したり縮小したり移動したりできるプラグインを発見しました。英語サイトしか見つからなかったので翻訳を兼ねてメモしておきます。たぶんですがあまりにもバカデカイ画像ファイルだと容量的に問題あるんでしょうけど、解像度が非常に高く引き伸ばしてもかなり鮮明に映っているような画像を細部まで見せたい時は結構便利かもしれないです。しかしこんな機能を自分のサイトに実装できる時代になってしまったというのもスゴイ話ですね。　サンプル

プラグインの準備とダウンロード

　プラグイン名は、Mapbox、フルネームはMapbox: Zoomable jQuery Map Pluginです。
http://wayfarerweb.com/jquery/plugins/mapbox/
このプラグインは、拡張機能としてマウスホイールをくるくるやってあげることで拡大縮小ができるようにMouse Wheel Extensionプラグインも同時に読み込んであげます。なのでまずは、以下のjQueryプラグインをダウンロードします。
Mapbox プラグイン　ダウンロード
Mouse Wheel Extensionプラグイン　ダウンロード

ダウンロードしたらjQueryを使えるようにします。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="./script/jquery.mousewheel.js"></script>
<script type="text/javascript" src="./script/jquery.mapbox.js"></script>

　私はGoogleが提供してくれているjQueryライブラリーを読み込んでしまっています。現在現時点で1.4.1が一番新しいはずです。それからダウンロードしたプラグインを読み込みます。任意のディレクトリから読み込んで設定してください。これで必要なプラグインとライブラリーの準備完了です。

CSSの設定

 拡大縮尺比率にもよりますが、ここでは解説ページとちょっと比率を変えてやってみます。最小サイズが500px*500pxの正方形です。勿論スタイルシートは各デザインに合わせて調整してください。

<style type="text/css">
    #viewport {
        width: 500px;
        height: 500px;
        cursor: move;
        margin: 0 auto;
        overflow: hidden; /*keep map contents from spilling over if JS is disabled*/
    }
</style>

HTMLの設定

　次にHTMLの設定例ですが、ここでは先のCSSと連動して#viewportのブロックを作ってあげます。見ての通り最小サイズはbackgroundとして配置し拡大画像をdivで設定してゆきます。ここでは4つの画像をデフォルト->２倍->2倍->1.5倍としてあります。ここらの比率は適当でいいみたいです。この画像のレイヤーは少なくとも２階層ないとダメだと言っています。当たり前の話ですが最低２階層ないと拡大縮小の意味がなくなってしまうので...。
　注意点は、<div class="mapcontent">という空のブロックをそれぞれ入れておくことです。ここらの操作はjQueryがいろいろやってくれているのでそのまま素直に書いておけばOKです。

<div id="viewport">
    <div style="background: url(images/layer1.png) no-repeat; width: 500px; height: 500px;">
        <!--top level map content goes here-->
    </div>
    <div style="height: 1000px; width: 1000px;">
        <img src="images/layer2.jpg" alt="" />
        <div class="mapcontent">
            <!--map content goes here-->
        </div>
    </div>
    <div style="height: 2000px; width: 2000px;">
        <img src="images/layer3.jpg" alt="" />
         <div class="mapcontent">
            <!--map content goes here-->
        </div>
    </div>
    <div style="height: 3000px; width: 3000px;">
        <img src="images/layer4.jpg" alt="" />
         <div class="mapcontent">
            <!--map content goes here-->
        </div>
    </div>
</div>

　この時点では、４つの画像がどーんと表示されてしまう状態なので、それを制御するjQueryのコードを追加します。

jQueryのコードを追加

<script type="text/javascript">
    $(document).ready(function() {
        $("#viewport").mapbox({mousewheel: true});
    });
</script>

という感じでコードを追加します。英文では、「たったこれだけ！（That's all!）」みたいな感じで大喜びしている感じが伺えます。しかし現にたったこれだけで出来てしまったので結構感動しました。しかしあんまり行きたくない飲み会の集合時間に間に合うか間に合わないかという時に急いでコードを書いていた時なので更に感動しました。
　マウスホイールでころころしたくない人は、単に

$("#viewport").mapbox({mousewheel: true});　→ $("#viewport").map();

と書き換えてくださいということです。

さらにいろいろ

　モア・アドバンスド・セッティングができるそうです。いろいろ出来すぎて困っちゃうわけですが、とりあえずデフォルトの設定をどうぞということでした。以下のコードはデフォルトの設定なので付け加えてもMapboxには何も起きませんが、いろいろと設定を変えたい時に便利です。（実際には私はここまでしかやってません。ここまでで充分な機能です。）

<script type="text/javascript">
    $("#viewport").mapbox({
        zoom: true, // does map zoom?
        pan: true, // does map move side to side and up to down?
        defaultLayer: 0, // starting at 0, which layer shows up first
        layerSplit: 4, // how many times to split each layer as a zoom level
        mapContent: ".mapcontent", // the name of the class on the content inner layer
        defaultX: null, // default positioning on X-axis
        defaultY: null, // default positioning on Y-axis
        zoomToCursor: true, // if true, position on the map where the cursor is set will stay the same relative distance from the edge when zooming
        doubleClickZoom: false, // if true, double clicking zooms to mouse position
        clickZoom: false, // if true, clicking zooms to mouse position
        doubleClickZoomOut: false, // if true, double clicking zooms out to mouse position
        clickZoomOut: false, // if true, clicking zooms out to mouse position
        doubleClickMove: false, // if true, double clicking moves the map to the cursor position
        clickMove: false, // if true, clicking moves the map to the cursor position
        doubleClickDistance: 1, // number of positions (determined by layerSplit) to move on a double-click zoom event
        clickDistance: 1, // number of positions (determined by layerSplit) to move on a click zoom event
        callBefore: function(layer, xcoord, ycoord, viewport) {}, // this callback happens before dragging of map starts
        callAfter: function(layer, xcoord, ycoord, viewport) {}, // this callback happens at end of drag after map is released "mouseup"
        beforeZoom: function(layer, xcoord, ycoord, viewport) {}, // callback before a zoom happens
        afterZoom: function(layer, xcoord, ycoord, viewport) {}, // callback after zoom has completed
        mousewheel: false /* requires mousewheel event plugin: http://plugins.jquery.com/project/mousewheel*/
    }
)
</script>

　気になるところでは、defaultLayerを中程の1とか2に設定するのもおもしろいかなと。また、doubleClickZoomをtrueにしておくとGoogle Mapライクになって結構いいかもとか。いろいろできそうです。

更にいろいろできるコード

<script type="text/javascript"> 
    $("#viewport").mapbox("zoom");//zooms in 1 level (determined by layerSplit option) 
    $("#viewport").mapbox("zoom", 2);//zooms in 2 levels 
    $("#viewport").mapbox("back");//zooms out 1 level 
    $("#viewport").mapbox("back", 2);//zooms out 2 levels 
    $("#viewport").mapbox("zoomTo", 2);//zooms to the default size of the third layer (0 being the first) 
    $("#viewport").mapbox("left");//move the current layer left 10 pixels 
    $("#viewport").mapbox("right");//move the current layer right 10 pixels 
    $("#viewport").mapbox("up");//move the current layer up 10 pixels 
    $("#viewport").mapbox("down");//move the current layer down 10 pixels 
    $("#viewport").mapbox("left", 20);//move the current layer left 20 pixels 
    $("#viewport").mapbox("right", 20);//move the current layer right 20 pixels 
    $("#viewport").mapbox("up", 20);//move the current layer up 20 pixels 
    $("#viewport").mapbox("down", 20);//move the current layer down 20 pixels 
    $("#viewport").mapbox("center");//centers current layer 
    $("#viewport").mapbox("center", { 
        x: 200, 
        y: 400 
    });//centers current layer at positions 200px, 400px on the x and y axis 
</script> 

参考サイト様
http://phpspot.org/blog/archives/2009/12/googlemapjquery.html