Googleマップの画面サイズ変更後に表示されますか？

Question

私は埋め込んでいるGoogleマップに問題があります。マップが表示されず、ウィンドウのサイズを変更したときにのみ表示される理由を理解できません。stackoverflowのさまざまなソリューションを調べましたが、私のために。ここで

は私のjsのコードは次のとおりです。

<script> 
function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: 31.554606, lng: 74.357158}, 
      zoom: 14 
     }); 
google.maps.event.addListenerOnce(map, 'idle', function() { 
       google.maps.event.trigger(map, 'resize'); 
      }); 
     } 
</script> 

私のdiv

<div id="map"></div> 

私はアプリケーションをロードするとき、それは

のように表示され、再サイズブラウザウィンドウの後に、それは次のように完全に表示されますこの

この問題を解決する方法を教えてください。

Answer 1

「div id = map」が表示されたらgoogle.maps.event.trigger（map、 'resize'）を呼び出します。 How do I resize a Google Map with JavaScript after it has loaded?

Answer 2

eventlistenerがresizeに設定されている場合、onloadに設定する必要があります。

Answer 3

何も私のために働いていません。私はブートストラップのモデルボックスを使って地図をロードしていました。私は何時間も何もしなかった。マップをロードするたびに、灰色のボックスが表示されますが、ブラウザのサイズを変更するとマップが表示されます。ウィンドウのサイズを変更する必要があるようです。だから私はinitmap2()と呼ばれる関数にすべてのマップ機能を置き、その中に新鮮な地図を表示しました。そして私は、すぐにモーダルボックスが開くだろうと

setTimeout(initMap2, 200); 

を使用クリックすると、それはマップを表示するであろう、と私は働く意志100 millisecondsを試してみましたが、私はそれはので、私は念のために500msを保持200+ millisecondsで動作しますね。

私はこれが

Answer 4

を役に立てば幸い私は、これは作業後にのみ二つのものを組み合わせることが見つかりました：のsetTimeoutとGoogleはサイズを変更。

そうは、initMapの終わりに、私が設定：

google.maps.event.addListener(map, "idle", function(){ 
    google.maps.event.trigger(map, 'resize'); 
}); 

そして、このようなinitMapためのsetTimeoutを作成します。

$(document).ready(function(){ 
    setTimeout(initMap, 1000); 
}); 

- を編集

答えるために@ LucaC .:私のinitMapは別のjsです。私はページにリンクしています。上記の解決策はこのjs（setTimeoutのみ）で定義されています。

しかし、しばらくすると、モバイルデバイスでこの問題が引き続き発生していることに気付きました。周りの作業

：initMapのためのsetTimeoutを維持し、ページ上で私はマップをロードするには、私はそう

$(window).load(function(){ 
setTimeout(function(){ 
    google.maps.event.trigger(map, "resize"); 
}, 250); 
}); 

を設定している：I）マップを壊す何かを遅らせます。 ii）すべてのページの最後に、ページの読み込み後にマップのサイズを変更してください:)