Google Mapsで地図用コンテナを非表示にして地図を初期化すると表示がおかしい

Tweet

Category JavaScript 2013/05/09

問題

JavaScriptでのタブ切り替えと、Google Maps の地図の表示を組み合わせた画面を作っています（Google Maps APIを使ってます）。

非表示のタブに地図の表示をしようとすると、タブを選択したときの地図の表示がおかしいです。

どうするとちゃんと表示されるでしょうか。

答え

初期化時点で地図のコンテナとなるdiv要素が非表示だと、コンテナの大きさが取得できないのか、何かがうまくいかないらしい。

対策はいくつか考えられる。

1. タブをクリックしたときに初期化処理をする方式
2. 何かおかしくても初期化だけはしておいて、タブをクリックされたときに再描画を依頼する方式。
3. display:none; ではなくて、別の方法で隠すと大丈夫だったりするらしい（未確認）

タブをクリックしたときに初期化処理をする方式

タブがクリックされて地図のコンテナのdiv要素が表示状態になってから、初期化処理をする。

タブごとに地図が違うので初期化処理もそれぞれ違う。

地図の初期化は1回だけでよいので .one() でも使うとちょうどよいだろう。

//初めて岐阜県のタブがクリックされたときに地図初期化
$('#tabs a[href^="#panel"]:eq(0)').one('click', function(){
	var mapOptions = {
		center: new google.maps.LatLng(35.391289,136.722107),
		zoom: 10,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);
	return false;
});

という作戦で → Google Mapsをタブに入れるサンプル 1

タブをクリックされたときに再描画を依頼する方式

見えないタブの中で何かおかしくなっていても初期化だけはしておく。

タブをクリックされたときに再描画を依頼すれば、まともな位置に書き直してくれる。

再描画は、地図に resizeイベントを発生させればよい（google.maps.event.trigger(map, 'resize')）。

という作戦で → Google Mapsをタブに入れるサンプル 2