Google maps responsive redimensionner

Question

J'essaie d'obtenir google maps réactif et redimensionner tout en gardant son centre lorsque Windows redimensionne. Je lis d'autres questions en ce qui concerne la pile tels que:

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

de la deuxième pile question I got a link which helps me with part of the code mais je n'ai toujours pas de chance. Voici le code que je me sers, quand je redimensionnez la fenêtre, les cartes ne redimensionne pas du tout

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 carte en une portée où l'écouteur d'événement peut l'utiliser. Vous créez la carte dans votre fonction initialize() et rien d'autre ne peut l'utiliser lorsqu'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); 
});