【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行は地図の中心地を再定義するものらしい…(あんまり実感なし)