[GoogleMapsAPI]GoogleMapを非表示でロードする

photo by caveman_92223
 たとえば、最初は地図なんて見えないけど、ボタンを押したら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;
			}
		}
	}
);


何が嬉しいかというと、ボタンを押した時にロードするよりも、あらかじめロードしていた方が、多少スムーズに表示されます。

トラックバック(0)

このブログ記事を参照しているブログ一覧: [GoogleMapsAPI]GoogleMapを非表示でロードする

このブログ記事に対するトラックバックURL: http://mogya.com/mt/mt-tb.cgi/775

コメント(2)

もぎゃ Author Profile Page:

アレ。これだとうまくいかないことがある。だめかぁ?

もぎゃ Author Profile Page:

表示する時に、checkResize() をよんであげるといいらしい。

コメントする


画像の中に見える文字を入力してください。

このブログ記事について

このページは、 もぎゃが 2009年9月22日 13:07に書いたブログ記事です。

ひとつ前のブログ記事は「 きたみりゅうじさんに取り上げていただきました 」です。

次のブログ記事は「 はてなメカニカルターク 」です。

最近のコンテンツは インデックスページ で見られます。過去に書かれたものは アーカイブのページ で見られます。

Powered by
Movable Type