ロード後にJavaScriptでGoogleマップのサイズを変更するにはどうすればよいですか？

'mapwrap' divを400px x 400pxに設定し、その中にGoogle 'map'を100％x 100％に設定しています。したがって、地図は400 x 400pxで読み込まれ、JavaScriptを使用して「mapwrap」のサイズを画面の100％x 100％に変更します。Googleマップは予想どおり画面全体にサイズ変更されますが、タイルはページ。

Googleマップを大きなサイズの「mapwrap」divに再調整するために呼び出すことができる単純な関数はありますか？

Google Maps v2を使用している場合はcheckResize()、コンテナのサイズを変更した後で地図を呼び出します。 リンク

更新

Google Maps JavaScript API v2は2011年に廃止されました。これはもう使用できません。

Google Maps v3の場合、サイズ変更イベントを異なる方法でトリガーする必要があります。

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

resizeイベントのドキュメントを参照してください（「resize」という単語を検索する必要があります）：http : //code.google.com/apis/maps/documentation/v3/reference.html#event

更新

この回答は古くからあるので、小さなデモは価値があるかもしれません。jQueryを使用していますが、実際にそうする必要はありません。

$(function() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

  // listen for the window resize event & trigger Google Maps to update too
  $(window).resize(function() {
    // (the 'map' here is the result of the created 'var map = ...' above)
    google.maps.event.trigger(map, "resize");
  });
});

html,
body {
  height: 100%;
}
#map-canvas {
  min-width: 200px;
  width: 50%;
  min-height: 200px;
  height: 80%;
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&dummy=.js"></script>
Google Maps resize demo
<div id="map-canvas"></div>

更新2018-05-22

Maps JavaScript APIのバージョン3.32の新しいレンダラーリリースでは、サイズ変更イベントはMapクラスの一部ではなくなりました。

ドキュメントには、

マップのサイズが変更されると、マップの中心が固定されます

• 全画面コントロールで中央が保持されるようになりました。

• サイズ変更イベントを手動でトリガーする必要がなくなりました。

ソース：https : //developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); バージョン3.32以降、何の影響もありません

人気のある答えgoogle.maps.event.trigger(map, "resize");は私だけではうまくいきませんでした。

これは、ページが読み込まれ、マップも読み込まれたことを保証するトリックでした。リスナーを設定し、マップのアイドル状態をリッスンすることで、イベントトリガーを呼び出してサイズを変更できます。

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

これが私の答えでした。

Wolfgang Pichlerのmap-in-a-boxは、

ドラッグおよびサイズ変更可能なdiv要素にマップをロードします。

これは、仕事を完了するのに最適です。マップのサイズが変更されます。マップのサイズを変更するために要素を検査する必要はもうありません。それが行うことは、自動的にサイズ変更イベントをトリガーします。

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

        map_array[Next].setZoom( map.getZoom() - 1 );
    map_array[Next].setZoom( map.getZoom() + 1 );

まず、私を導き、この問題を閉じてくれてありがとう。私はあなたの議論からこの問題を修正する方法を見つけました。ええ、要点に入りましょう。問題は、CakePHP3でGoogleMapHelper v3ヘルパーを使用していることです。ブートストラップモーダルポップアップを開こうとすると、マップ上に灰色のボックスの問題が発生しました。2日間延長されました。最後に私はこれを修正しました。

問題を修正するには、GoogleMapHelperを更新する必要があります

以下のスクリプトをsetCenterMap関数に追加する必要があります

google.maps.event.trigger({$id}, \"resize\");

そして、JavaScriptのコードの下にインクルードが必要です

google.maps.event.addListenerOnce({$id}, 'idle', function(){
   setCenterMap(new google.maps.LatLng({$this->defaultLatitude}, 
   {$this->defaultLongitude}));
});