web-dev-qa-db-ja.com

JavaScriptが読み込まれた後にGoogleマップのサイズを変更するにはどうすればよいですか？

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

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

javascriptcssgoogle-maps
105
Matthew James Taylor

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

UPDATE

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

28
SingleNegationElimination

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

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

サイズ変更イベントのドキュメントを参照してください（Wordの「サイズ変更」を検索する必要があります）： 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>

UPDATE 2018-05-22

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

ドキュメントの状態

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

  • フルスクリーンコントロールが中心を保持するようになりました。

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

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

google.maps.event.trigger(map, "resize");は、バージョン3.32以降では効果がありません

322
cmroanirgo

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

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

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

これが私の答えでした。

8
italiansoda

Wolfgang Pichler's map-in-a-box は

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

2
user177903

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

    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 );
1
Divyanshu Rawat

まず、私を導き、この問題を閉じてくれてありがとう。私はあなたの議論からこの問題を解決する方法を見つけました。ええ、ポイントに行きましょう。問題は、CakePHP3でGoogleMapHelper v3ヘルパーを使用していることです。 bootstrapモーダルポップアップを開こうとすると、マップ上で灰色のボックスの問題が発生しました。 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}));
});
0
user1933951