Googleマップの隠しdiv

Question

私は私のウェブページ内のGoogleマップを隠すためにそれらの崩壊divの1つを使用しています。 しかし、divを拡張してGoogleマップを公開するイベントをトリガーすると、表示されません。 この問題はIEでのみ発生し、他のすべてのブラウザは正常に動作します。 このコードを追加するようにこの同じ質問が表示されました。

google.maps.event.trigger（map、 'resize'）;

しかし、どこに配置するのですか？私はdivが崩壊したときに呼び出されるJavascript関数に配置しましたが、機能しません。 「地図」を地図の名前に置き換える必要がありますか？ 私はグーグルサイトから "iframe"タグとしてGoogleマップのコードを取得しました。私はちょうどそれを 私のウェブページに貼り付けました... 説明してください。

Answer 1

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

は、Maps APIを使用している場合です。これにより、マップはマップオブジェクトへの参照です。

しかし、あなたはAPIを使用していません。 Googleマップからiframeを使用しています。

Googleマップでは、表示されていないdivにあるのが好きではありません。私が考えている解決策はiframeを1x1 pxと言うことです。その後、divをサイズ変更して十分大きくして見えるようにします。

代わりにiframeにsrc = "about：blank"を指定することもできます。 divを表示した後、srcを正しいurlに動的に設定します。こうすることで、divが表示されている間にマップが完全にロードされます。 （これはおそらく、ユーザーがiframeを読み込まなくてもマップを開くことはできません）

Answer 2

Google Maps APIを使用していないと言っているので、 ：

ラップマップ：

<div id="map-wrapper"><iframe src="https://www.google.com/maps/..." /></div> 

使用地図が示され、このコード（jQueryのバージョン）：

$('#map-wrapper').html($('#map-wrapper').html()); 

JavaScriptバージョン：

document.getElementById("map-wrapper").innerHTML = document.getElementById("map-wrapper").innerHTML; 

マップを表示すると、ラッパー（Googleマップのiframe）のコンテンツが再生成され、再読み込みされます。