javascript - gmaps - Google Maps responsive resize

google maps responsive bootstrap

Question

Estoy tratando de hacer que los mapas de Google respondan y cambien de tamaño manteniendo su centro cuando las ventanas cambian de tamaño. Leí otras preguntas de la pila con respecto a tales como:

Responsive Google Map? y Centre Google Maps (V3) en el tamaño del navegador (sensible)

de la segunda pregunta de pila recibí un enlace que me ayuda con parte del código, pero todavía no tengo suerte. Este es el código que estoy usando, cuando cambio el tamaño de la ventana, los mapas no cambian de tamaño en absoluto

    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

Mueva su variable de mapa a un ámbito donde el oyente del evento pueda usarla. Está creando el mapa dentro de su función initialize () y nada más puede usarlo cuando se crea de esa manera.

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