V2の目玉 GOverviewMapControl の再表示位置決めが難しい
Pearl ROAD
先のＶ２リリースＶ１期限？のトピで話題に上がった件名の機能をつけてみました。
何故か公式のリファレンス
http://www.google.com/apis/maps/documentation/reference.html
には説明が無く、非公式の
http://www.econym.demon.co.uk/googlemaps/basic13.htm
を見て設置しましたが、
そのまま設置すると右下矢印で消した後の再表示位置がどうも勝手にデフォルト位置しかも妙なところに再表示されてしまいます。非公式のサンプルページも同様です。
苦肉の策でなんとか格好はつけましたが（笑）
http://members.jcom.home.ne.jp/wa-ga-ya/map/kansimap.htm
どなたかすかっと決めていただけないでしょうか！！
＃また、公式ドキュメントのどこかに載ってますでしょうか？
よろしくお願いします。
Hirotaka Ogawa
var overview = document.getElementById("map_overview");
document.getElementById("map").appendChild(overview);
Pearl ROAD
地図の右下に GOverviewMapControl
を付ける場合はうまくいきました。
OK e.g.:
http://members.jcom.home.ne.jp/wa-ga-ya/map/uwakai.htm
でも地図の右外側に付ける場合はうまくいかないようです。
Using GOverviewMapControl (v2.41)
http://www.econym.demon.co.uk/googlemaps/basic13.htm
によりますと次のようにブラウザによって表示に差異があるということで、
In v2.41, the default positioning of the overview is different in
different browsers, and it can't be positioned with a
GControlPosition() in the normal way, because IE re-applies the default
positioning after the GControlPosition() takes effect. Therefore,
you'll probably want to control the position of the overview yourself.
実際、
・ＩＥは地図を基点に右下に固執
・Ｆｉｒｅｆｏｘはウインドウを基点に標準で右下、GControlPosition(G_ANCHOR_TOP_LEFT,
new GSize(100,10))などは有効
という違いが厄介です。
「Googleローカル」は地図の右下がウインドウの右下になるよう調整しているので両方のブラウザでうまく表示できるのですが、
地図の右側にOverviewMapControlや情報を掲載しようとすると、途端に破綻をきたしてしまいます。
とりあえずいろいろ試して、ある程度様になる方法を二つ見つけました。
#1 解決方法
位置決めは先にあげた非公式の
http://www.econym.demon.co.uk/googlemaps/basic13.htm
でＯＫなので、問題のＩＥにおける再表示（Ｆｉｒｅｆｏｘでは問題無し）において、
「ＩＥは地図を基点に右下に固執」 に対して新たな発見として
「ＩＥは地図を含む上位の div を基点に右下に固執」
を使ってクリアできました。（見た目スマートですが、裏技的でちょっとすっきりしない）
OK e.g.:
http://members.jcom.home.ne.jp/wa-ga-ya/map/maps_V2.htm
#2 解決方法
「Googleローカル」と同じになるよう地図だけインラインフレームにして付随する情報や操作を親ページに設置する。
但しOverviewMapControlは地図内、処理ソースはちょっと複雑怪奇
実装例：
http://members.jcom.home.ne.jp/wa-ga-ya/map/iTest_maps_V2_0420.htm
ほとほと困りもんです・・・
Pearl ROAD
解ってしまえば簡単でした。
// 地図概観ウインドウ表示処理関数
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝再表示リンク用に関数化
function addamapoverview(){
ov = new GOverviewMapControl(new GSize(200,200)); // 標準の右下
setTimeout("map.addControl(ov)" , 1) ; // 地図概観ウインドウ
}
<!--
地図表示エリア＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
-->
<!--
地図領域コンテナ ＩＥ の基点となる。 地図の右外側下に設置可能＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
-->
<!--
更に position:absolute により Ｆｆ の基点となる（標準ではウインドウが基点）＝＝＝＝＝＝＝＝＝＝＝
-->
<div style=" position:absolute; width:840px; height:400px;
margin:5px;">
<!--
地図領域 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
-->
<div id="map" style=" float:left; width: 500px; height: 400px;
margin:0; padding:0;">地図表示エリア</div>
<div style=" width:334px; height:400px; margin:0; padding-left:5px;
float:right; font-size:90%; line-height:1.3; background-color:
#ffffff;">
<div style="width: 100%; height: 20px; margin:0; font-size:15px;
text-align:center;">
道標と縁の漢詩一覧
</div>
<div id="MarkerList" style="width: 100%; height: 345px; margin:0;
padding:0; overflow:scroll;">一覧表示エリア</div>
<div style=" z-index:98; width:324px; height: 25px; margin:0px;
padding:5px; text-align:right; font-size:15px; background-color:
#9cb2ce;">
<a href="javascript:map.removeControl(ov); addamapoverview();"
style=" line-height:1.2; width:100px; border: 1px solid #888;
margin:2px; padding:2px 5px;background-color:
#ffffff;">地図概観再表示</a>
</div>
</div>
</div>
<div class="footer" style="clear:both; position:absolute; top:41em; ">
var map = new GMap2(document.getElementById("map")); //
Version 2
map.addControl(new GLargeMapControl());
//移動・縮尺調整ボタン
map.addControl(new GMapTypeControl());
//地図タイプ切り替えボタン
addamapoverview(); // 地図概観ウインドウ表示処理関数
Ｐｏｉｎｔは以下のposition:absoluteでした。
<div style=" position:absolute; width:840px; height:400px;
margin:5px;">
<div id="map" style=" float:left; width: 500px; height: 400px;
margin:0; padding:0;">地図表示エリア</div>
これでＩＥとＦＦを同じＰｏｓｉｔｉｏｎ（地図の右下で且つ外側）にすることが可能となります。
Ｅ．Ｇ．
http://members.jcom.home.ne.jp/wa-ga-ya/map/kansimap.htm
やれやれ．．．