以前の記事で二番目以降のタブの中に隠れたGoogleMapが表示されない時への対応方法を掲載したが、GoogleMap記述方法も変化しているので、2018版として新たな対応方法を紹介する。

ページ内でタブ表示するjQueryは多数紹介されているので割愛するが、多くの場合以下のようなタグの構造になっているのではないだろうか。

	
タブ1
	
タブ2
	
タブ3


	

		コンテンツ1
	
	

		コンテンツ2
		

	
	

		コンテンツ3
	

部分的な違いはあっても、基本的にはtabs_contentの中で分けられたコンテンツが非表示になっており、タブをクリックするとjavascriptによりタブに結び付けられた要素を表示するように切り替える構造。
結果として共通なのが最初にアクティブになっていないタブにGoogleMapを置いておくと、そのタブが表示されてもGoogleMapの部分はグレー表示になってマップが表示されないという症状。
タブ表示時にマップに対してリサイズを指示することで表示されるようになる場合もあるが、それでも表示されない場合は初期段階でのinitializeから指定する。

まず、GoogleMapを表示させているjavascript内で初期化している箇所があったら、コメントアウトする。

例）

/* ロード時に初期化 */
google.maps.event.addDomListener(window, 'load', initialize);

　　　　　↓

/* ロード時に初期化 */
//google.maps.event.addDomListener(window, 'load', initialize);

initializeを複数回行うと表示されなくなるので、GoogleMapが含まれるタブを指定された時の「初回のみ」initializeを行う。
初回のみ処理させたい場合は、$(セレクター).one(イベント名, function(){処理});を使うのが便利。

具体的にはGoogleMapが含まれるタブにクラスを指定。例）class=”goo”
上記のタグの場合は、このようになる

$('.tabs .goo a').one('click', function(){initialize();});

次に、一度表示された後、別のタブを表示させ、再びGoogleMapのタブをクリックされた時の処理も設定する。

google.maps.event.trigger(map, 'resize');

両方の指示を記載したjavascriptは以下のようになる。

タブでレイアウトされたページでGoogleMapが表示されない時、この方法を試してもらいたい。