Googleマップでフルスクリーンで地図全体が表示されない

Question

Google Maps JavaScript API v3のサイズ変更に問題があります。 CSSの「パラメータ」をロード時に設定した場合（ちょうどdocumentationの場合）、マップの高さと幅は100％になりますが、問題はありません。しかし、リンクをクリックして同じ結果を得ようとすると、地図全体が表示されません。

私は、このイベントにはjQueryでcss()とtoggleClass()の両方をテストしています。

// jQuery 
$('#weather-map').toggleClass('test'); 

// CSS 
#weather-map.test { 
    height : 100%; 
    width : 100%; 
    top : 0; 
    left : 0; 
    position : absolute; 
    z-index : 200; 
} 

css()作品（マップを全画面表示になります）が、上記の画像は、マップを全画面表示時にレンダリングする方法を示しています。toggleClass()は、マップは、このコードで（それをフルスクリーンになり、完全ではなく、マップを非表示になります）、不可視になります：

$('#weather-map').css({ 
         'height' : '100%', 
         'width' : '100%', 
         'top' : '0', 
         'left' : '0', 
         'position' : 'absolute', 
         'z-index' : '200' 
         }); 

私は今、このように動作しますか？私は何かを見逃してしまったのですか、この方法は地図の全画面を切り替えるのに適した方法ではありませんか？

ありがとうございます。

Answer 1

GoogleのマッピングJavascriptがどのように機能するかという理由だけです。コンテナのサイズに基づいてレンダリングします。その後、コンテナのサイズを変更した場合に備えて、再レンダリングするハンドラを追加しません。上の例では、マップの初期化コードをもう一度呼び出すだけで、リサイズされたdivで地図を再描画しなければならないと思います。