Google maps responsive resize

Question

私は応答し、Googleのサイズが変更されたときにその中心を維持しながらサイズを変更しようとしています。私は、次のような点で他のスタック質問読み：第二のスタックの質問I got a link which helps me with part of the codeから

Responsive Google Map?とCenter Google Maps (V3) on browser resize (responsive)

を私はまだ何の運を持っていません。これは私がウィンドウのサイズを変更する場合、マップはすべて

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% } 

Answer 1

にあなたのマップ変数を移動しますイベントリスナーが使用できるスコープです。 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); 
});