1. TOP
  2. HTML / CSS Web
  3. 【googlemap+jQuery Tab】 タブ内のグーグルマップがズレる時の対処法

【googlemap+jQuery Tab】 タブ内のグーグルマップがズレる時の対処法

カテゴリ:
HTML / CSS
Web
| トラックバック(0)
投稿者:yo yo

タブナビゲーションでグーグルマップを表示するとズレる時の対処法

タブナビゲーション(jQuery ui tabs)のコンテンツ部分にgooglemapを表示すると地図中心が真ん中にこなくて困ったときはありませんか?

自分で既に対処している人も多々いると思いますが、私はこんな風に解決しましたってことでメモ

Google MAPとjQuery Ui Tabのオリジナル

html


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
タブ01中身
タブ02中身
タブ03中身
ここにグーグルマップ

javascript

	// グーグルマップ
	function initialize(){
		var mapdiv = document.getElementById('gmap');
		var myOptions = {};
		var map = new google.maps.Map(mapdiv, myOptions);
		/*省略*/
	}
	$(document).ready(function(){
		// タブを生成
		$('#tabs').tabs()
	});

デフォルトではGoogle MapとjQuery Ui Tabsはこんな感じになっているハズ(適当)ですが、画面がロードされた時にdiv#gmapにグーグルマップが生成されてしまいます。

画面がロードされたときにdiv#gmapは表示されておらず、多分widthとheightが読み込めない為、グーグルマップの中心点が左上になり表示がバグります。

対処法として、DOMがロードされた時にグーグルマップを生成するのではなく、タブが表示された時にグーグルマップを生成すれば正常に表示されるようになります。

改変後

html


タブ01中身(ui.index上 0番目)
タブ02中身(ui.index上 1番目)
タブ03中身(ui.index上 2番目)
ここにグーグルマップ
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

javascript

$(document).ready(function(){//ロードが完了したら
	$('#tabs').tabs().bind( "tabsshow", function(event, ui) {// タブを生成、タブにイベント(タブの中身が表示される時)をバインド
		if(ui.index==2){ //表示されるタブが03の時
			var mapdiv = document.getElementById('gmap');
			var myOptions = {};
			var map = new google.maps.Map(mapdiv, myOptions);
			/*省略*/
		}//end if
	});
});

こんな形でjQueryのタブコンテンツの中にgooglemapを生成できます。

適当なコードなので、当該タブ(タブ03)をクリックされる度にコードが走るので本当はこんなコードは駄目駄目駄目なんですが、改変するのが面倒なのでコレでいいです。ごめんなさい。1度生成したら2度目の云々みたいな形で適当にフラグとか作って管理してください。

困ったときは

「IE7以下でタブが正常に動かないんだけど」とか思ってませんか?

グーグルマップのjs内、配列の最後の要素の","カンマを取り除いてみてくださいよ。

« 【ナカノヒトナド】 webプロモーションで中の人を魅せるということ 【イナイ】 | ホーム | "Meta description"は入れたほうが良い?入れないほうが良い? »

トラックバック

http://pulltab.info/mt/mt-tb.cgi/102
ページの先頭に戻る