Google maps responsive resize

Question

Próbuję uzyskać responsywne mapy Google i zmienić rozmiar, zachowując jego centrum, gdy zmienia się wielkość okna. Czytałem inne pytania stosu w odniesieniu do takich jak:

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

z drugiego stosu pytanie I got a link which helps me with part of the code ale wciąż nie mam szczęścia. Jest to kod używam, kiedy zmiany rozmiaru okna, mapy nie zmieniać rozmiar na wszystkich

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

Najedź na zmienną mapę zakres, w którym detektor zdarzeń może z niego korzystać. Tworzysz mapę wewnątrz funkcji initialize() i nic innego nie może jej użyć, gdy zostanie ona utworzona w ten sposób.

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); 
});