埋め込みGoogleマップをjQueryのタブに入れるとうまく表示されない件の意外な解決策

jQueryのタブでGoogleマップを切り替えたい

複数の埋め込みGoogleマップを、タブで切り替えて表示させたい。

支社や支店、地方工場などが複数ある会社や団体のサイトを作る時などに持ち上がりがちな事案だが、デザイナーやディレクターが安易に考えていると、まずうまくいかない。

単純に複数埋め込むだけなら簡単なのだが、タブに入れると、２つめ以降のタブに入れたGoogleマップのボックスの中身がグレーになり、マップが表示されない。

これを発送の転換で乗り切る

タブの仕組みとしてよくあるのが、cssのdisplay:noneであらかじめタブコンテンツを非表示にしておいて、タブメニューをクリックでactiveやcurrentなどといったclassをタブコンテンツに付与し、display:blockにして表示させるというもの。

こうした場合、ページロード時に表示されているタブのGoogleマップは表示されているが、非表示になっているタブに切り替えても、Googleマップのloadのtriggerが上手く動かず、マップを読み込んでくれない。

そこで発送の転換

あらかじめ非表示にしているタブを表示させるのではなく、z-indexでactiveのタブコンテンツを一番上のレイヤーにする。

タブの切替は、あくまでカードシャッフルのように上下を入れ替えるだけ。

ページ上ではマップはすべてロードされているので、タブを切り替えても再読み込みなどはせず、どのタブにしても問題なく表示される。

マップがずれるといった現象も、おそらく回避できる。

この答えにたどり着くまで、数時間。

実装にかかった時間、５分。

コーディングは引き出しの多さだと、つくづく考えさせられた事案。