GoogleMapsブラウザリサイズ時のイベント処理でcheckResizeする！
今更感がありますがGoogleMapsAPIを使ったアプリで作りたいものができました。
サンプルコードで含めたい機能の実現性確認中。。。
ちょっとはまったのが、
ブラウザのリサイズ時に地図のセンターを変更したい（もしくは変更したくない）場合の話。
GoogleMapsデフォルトの動作では、例えばブラウザウィンドウの右端をつかんで左方向へドラッグ＆ドロップすると、表示されている地図の左端（西）は変わらずにウィンドウが狭くなった分右側が狭くなり、結果的に地図のセンター位置がより西側に動いてしまう（地図はスクロールせず）。
地図のセンター位置を変えたくなければ、同じ操作をした時に、地図が左にスクロールすればよい。
ということで、bodyのonresizeイベントで、リサイズ前のセンター位置がセンターに来るようにsetCenterとかpanToで動かしたいと思うのでした。
ところがIEではうまくいくのに、Firefoxでリサイズ後にsetCenterとかを行うと、おかしな位置にセンターを持っていったりする。
どうやら、GoogleMaps自体もonresizeでいろいろ計算しているらしく、自分の登録したonresizeイベントの処理されるタイミングとGoogleMaps自体の処理タイミングがブラウザによって異なるらしい。
つまり同一イベントに対して複数のイベントハンドルがある場合に、ブラウザによって処理順番が異なるらしい。
GoogleMapsAPIGroupに聞いてみたところ、あっという間に対策できました♪
自分のsetCenterやpanToの前にcheckResizeを呼ぶことで、GoogleMapsの方のイベント処理を確実に完了させられるみたいです。
→ ブラウザをリサイズしても地図のセンター位置が変わらないGoogleMaps(Firefox,IEで動作確認済み)
<script type="text/javascript">
//<![CDATA[
var map;
var center = new GLatLng(37.2, 135.8);
function load() {
resize();
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl( new GLargeMapControl() );
map.addControl(new GScaleControl());
map.addControl( new GMapTypeControl() );
new GKeyboardHandler(map);
map.setCenter(center, 5);
document.getElementById("message").innerHTML = center.toString();
var point = new GLatLng(35.65855154020906,139.70184803009033);
var marker = new GMarker(point);
map.addOverlay(marker);
map.openInfoWindow(map.getCenter(),
document.createTextNode("Hello, world"));
GEvent.addListener(map, "click", function(marker, point) {
if (marker) {
map.removeOverlay(marker);
} else {
map.addOverlay(new GMarker(point));
}
});
}
}
function resize(){
var map_obj=document.getElementById("map");
var disp=getDispSize();
map_obj.style.width=(disp.width-100)+"px";
map_obj.style.height=(disp.height-100)+"px";
if( map ){
map.checkResize();
map.panTo(center);
}
}
function getDispSize(){
if(document.all){
if(window.opera){
return {width:document.body.clientWidth,height:document.body.clientHeight};
}else{
return {width:document.documentElement.clientWidth,height:document.documentElement.clientHeight};
}
}
else if(document.layers || document.getElementById){
return {width:window.innerWidth,height:window.innerHeight};
}
}
//]]>
</script>
</head>
<body onresize="resize();" onload="load()" onunload="GUnload()">
