web-dev-qa-db-ja.com

Googleマップのレスポンシブサイズ変更

私はグーグルマップをレスポンシブにし、ウィンドウのサイズが変更されたときに中心を維持しながらサイズを変更しようとしています。次のようなスタックに関する他の質問を読みました。

レスポンシブGoogleマップ？ および ブラウザーのサイズ変更（レスポンシブ）の中央Googleマップ（V3）

2番目のスタックの質問から コードの一部で役立つリンクを取得しました ですが、まだ運がありません。これは私が使用しているコードです。ウィンドウのサイズを変更すると、マップはまったくサイズ変更されません

    function initialize() {
      var mapOptions = {
       center: new google.maps.LatLng(40.5472,12.282715),
       zoom: 6,
       mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    google.maps.event.addDomListener(window, "resize", function() {
     var center = map.getCenter();
     google.maps.event.trigger(map, "resize");
     map.setCenter(center); 
    });

html

 <div id="map-canvas"/>

cSS

html { height: 100% }
body { height: 100%; margin: 0; padding: 0; }
#map-canvas { height: 100%; }
javascriptjquerygoogle-maps-api-3
57
rob.m

イベントリスナーが使用できるスコープにマップ変数を移動します。 initialize（）関数内でマップを作成しているため、その方法で作成されたときに他のユーザーがマップを使用することはできません。

var map; //<-- This is now available to both event listeners and the initialize() function
function initialize() {
  var mapOptions = {
   center: new google.maps.LatLng(40.5472,12.282715),
   zoom: 6,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
 var center = map.getCenter();
 google.maps.event.trigger(map, "resize");
 map.setCenter(center); 
});
100
rsnickell