Ridimensionamento reattivo di Google Maps

Sto cercando di ottenere le mappe di google reattive e ridimensionate mantenendo il centro quando ridimensionano le windows. Ho letto altre domande sullo stack per quanto riguarda:

Mappa di Google retriggers? e Center Google Maps (V3) sul ridimensionamento del browser (reattivo)

dalla seconda domanda di stack ho un link che mi aiuta con parte del codice ma non ho ancora fortuna. Questo è il codice che sto usando, quando ridimensiono la finestra, le mappe non si ridimensionano 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

  

css

 html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-canvas { height: 100% } 

Sposta la tua variabile di 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); });