Redimensionnement réactif de Google maps

Question

Je suis en train d'essayer d'obtenir de google maps réactif et redimensionner tout en gardant son centre lorsque windows se redimensionne. J'ai lu d'autres de la pile des questions en ce qui concerne tel que:

Sensible Google Map? et Center de Google Maps (V3) sur navigateur redimensionner (responsive)

à partir de la deuxième pile question j'ai reçu un lien qui m'aide avec la partie du code mais j'ai toujours pas de chance. C'est le code que je suis, lorsque je redimensionner la fenêtre, les cartes n'est pas redimensionnée à tous

    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

Déplacez votre variable de carte dans une étendue où l'écouteur d'événements peut l'utiliser. Vous créez la carte dans votre fonction initialize () et rien d’autre ne peut l’utiliser quand elle est créée de cette façon.

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