Ridimensionamento reattivo delle mappe di Google

Question

Sto cercando di ottenere le mappe di google reattive e ridimensionate mantenendo il centro quando ridimensionano le finestre. Ho letto altre domande dello stack nei riguardi quali:

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

dalla seconda domanda pila I got a link which helps me with part of the code ma non ho ancora nessuna fortuna. Questo è il codice che sto usando, quando ho ridimensionare la finestra, le mappe non ridimensiona affatto

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

Spostare la variabile mappa in un ambito in cui il listener di eventi può utilizzarlo. Stai creando la mappa all'interno della tua funzione initialize() e nient'altro può usarla quando viene creata in quel modo.

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