たとえば、最初は地図なんて見えないけど、ボタンを押したらGoogleMapを表示するようなWEBアプリケーションを作りたいとか、逆ジオコーディング(だけ)のためにGoogleMapsを使いたい(！)とか、そういう理由で 見えないオブジェクト上にGoogleMapsオブジェクトをロードしたいという要求がたまにあって。
ところが、display:noneのオブジェクトにGoogleMapをロードすると、GoogleMapは自分自身のサイズが取れないので、ちゃんと表示されない。
display:none の状態で初期化するとバグる – てっく煮ブログ
上記ブログでは、だからdivを表示した状態でロードしましょう (つまり、GoogleMapはボタンを押した時にロードしましょう)ということになっているのですが。
GMap2だと、sizeプロパティを指定できるので、非表示のままロードすることも可能になっています。
Google Maps API リファレンス – Google Maps API – Google Code
/* googleマップ */
var currentPos = new Array();
currentPos['latitude'] = 35.7301;
currentPos['longitude'] = 139.7090;/* デフォルト値：池袋駅西口公園*/
var zoom = 14;
google.load("maps", "2",
{
"callback" : function() {
if (google.maps.BrowserIsCompatible()) {
jQuery(window).unload = google.maps.Unload;
var map = new google.maps.Map2(
document.getElementById("map_canvas"),
{ size:new GSize(500,500) }
);
map.setCenter(new google.maps.LatLng(currentPos['latitude'], currentPos['longitude']), zoom);
map.enableGoogleBar();
map.enableDoubleClickZoom();
map.addControl(new google.maps.SmallMapControl());
map.addControl(new google.maps.MapTypeControl());
}else{
window.alert('Browser is not compatible for Google Maps');
return;
}
}
}
);
何が嬉しいかというと、ボタンを押した時にロードするよりも、あらかじめロードしていた方が、多少スムーズに表示されます。