先日，Google Mapsの右下の小さい地図が表示されたことを紹介しました（こちら）。これをAPIで実際に実装してみることにしました。
http://web.sfc.keio.ac.jp/~tagchan/control_map.html
以下に詳しく説明しますが，とにかくこのソースをコピー＆ペーストし，API Keyを自分のものにしていただけると動くと思います（v2にするのを忘れずに）。
＜!-- 以下ソースコード --＞
function load(){
map = new GMap2(document.getElementById("map"));
//地図の縮尺変更するメモリの追加
map.addControl(new GLargeMapControl());
//地図の切り替えボタンの表示（地図と衛星画像）
map.addControl(new GMapTypeControl());
//最初は衛星画像を表示
map.setMapType(G_SATELLITE_MAP);
//GLatLng内には緯度→経度の順に値を入れる。
//4はズームのレベル。値が大きいほど詳細
map.setCenter(new GLatLng(34.991191, 131.008739),4);
//縮尺が左下にのる（API Documentには記載されてなかった。）
map.addControl(new GScaleControl());
//GOverviewMapControlで小さい地図を呼ぶ。
//Gsize(縦px，横px）は小さい地図の枠のサイズを決める。。
map.addControl(new GOverviewMapControl(new GSize(210,200)));
//pisitionOrverviewはfunction load()の外で定義する。
//GOverviewMapControl内の値はブラウザ内での表示する絶対座標(px)。
//GOverviewMapControl(左からの座標，上からの座標)。1の値は不明。
setTimeout("positionOverview(10,530)",1);
}
//この関数はonload()の外に置くこと
function positionOverview(x,y) {
var omap=document.getElementById("map_overview");
omap.style.left = x+"px";
omap.style.top = y+"px";
//枠の太さ
omap.firstChild.style.border = "1px solid gray";
//枠からの距離（左から，上から）
omap.firstChild.firstChild.style.left="4px";
omap.firstChild.firstChild.style.top="4px";
//小さい地図のサイズGSizeの値より小さい方が望ましい。
omap.firstChild.firstChild.style.width="200px";
omap.firstChild.firstChild.style.height="190px";
}
＜!-- ソースコード終了 --＞
IEで表示させ，右下の矢印で閉じることができますが，いったん閉じてまた開くと，画面右下に移動してしまいます。これはFirefoxではそのようになりません。Ver2になってから，さらにIEとの相性が悪くなっているような気がします。
コメントする