他のものがロードされた後にGoogleマップを読み込む

Question

Google Maps JavaScript APIを使用して、私のウェブサイトでクラウドフォントを使用しています。

JS：私が設定したクラウドフォントに「転換」のフォントが表示されないようにするに

、私は最初にbodyタグを非表示にして、すべてのロードが完了した後にそれをロードするために、いくつかの基本的なコードを入れてきました：

$(window).on('load', function() { 
    $("body").fadeIn('fast'); 
}); 

CSS：

body { 
    display: none; 
} 

コード自体は問題なく動作しますが、問題はGoogleマップを適切に読み込むことにあります。このfiddleのように地図が正しく読み込まれません。マップコードはそれ自身の上でうまく動作します。

Googleマップと一緒にロード機能でウィンドウを使用すると、両方を正しく動作させるにはどうすればよいですか？

Answer 1

ターゲット（#map）が非表示の場合、Googleマップはロードされないようです。

ターゲットが表示されたらマップのサイズ変更イベントをトリガすることで回避できますが、センターを希望の場所（緯度/経度）に戻すことを忘れないでください。

google.maps.event.trigger(map, 'resize'); 
map.setCenter({lat: -34.397, lng: 150.644}); // from OP's fiddle 

更新フィドル：https://jsfiddle.net/Lfq1negw/1/