【jquery】【CSS】display:noneでgoogle mapのiframe内の表示位置がずれる対処(簡易)
スマホでgoogle mapを複数埋め込んでtoggleで切り替えてたんですが
diplay:noneになると、地図の表示位置が北極とか表示されて遠すぎやろ!
と思わず関西弁つっこみを入れるこのごろ。
先送りしてたので、いい加減対処しないとなーと思ってぐぐってみても
clickで該当iframeを再読み込みなどがあるのですが、mapが複数ありすぎてちょっと断念。
もっと簡単なのが良いです。
て、ことでvisilityクラスを使ってtoggleClassで切り替えたところ一応できました。
(邪道かもしれない)
<p>タイトル</p> <div><!--←最初は表示させるタブ--> ううう </div> <p>タイトル2</p> <div class="hidden"> いいい </div> <p>タイトル3</p> <div class="hidden"> あああ </div>
.hidden { visibility:hidden; height:0; margin:0; padding:0; overflow:hidden; }
$(function(){ $("p").on("click", function() { $(this).next().toggleClass("hidden"); $(this).toggleClass("opn"); google.maps.event.trigger(map, 'resize'); map.setCenter(Latlng); }); });
こんな感じです。
google.maps.event.trigger(map, 'resize'); map.setCenter(Latlng);
この2行は地図の中心地を再定義するものらしい…(あんまり実感なし)