ホーム > Web制作 > display:noneでタブ切り替えを実装していると、その中にあるGoogleマップが表示されない不具合

display:noneでタブ切り替えを実装していると、その中にあるGoogleマップが表示されない不具合

これはちょっと前にも軽くぶち当たって「およよ」となったのですが、すっかり忘れていて、今日また「およよ」じゃなくて、今回は「うぴょーーーーーーーーー!」となりました。前回切り抜けたんなら今回もそれでいいんじゃない?とも思うのですが、そういうわけもいかず、今回は別のやり方でやってみたので一応メモ。

前回は

display:noneにしている要素内にGoogle Map(iframe埋め込み)があるとIEではマップを表示しない件について

これでした。

このときは非表示のときをdisplay:noneではなく、visibility:hiddenにして対応しました。これだと表示はされるので。でも、表示位置がかなりズレるので、そこはpositionプロパティで調整しました。

そして肝心の今回ですが、displayもvisibilityも使わずに、同じ位置に重ねて配置しておいて、それをjQueryのCSSメソッドでz-indexを切り替えて対応しました。

これをやる前にざざっと同様のことで苦悩されている人達がいないか調べてみましたが、なんかよくわかんなかったので(そのわからないことをまた調べてというコストをかける余裕が今回はなかったので)あんまり賢いやり方じゃなさそうだなぁと思いつつも、納期優先、スケジュール最優先ということで自分で自分を「今回はこれでいこう!」と説得して完了。

不動産関係のサイトで、物件の図面、マップ(Google)、ストリートビュー(Google)とかをタブで切り替えて表示とかけっこうよく見るので、ああいうのはみなさんどう処理しているのだろうとか思いつつ、、


ホーム > Web制作 > display:noneでタブ切り替えを実装していると、その中にあるGoogleマップが表示されない不具合

検索

ページの上部に戻る