web-dev-qa-db-fra.com

Redimensionnement réactif de Google maps

J'essaie de rendre google maps réactif et de redimensionner tout en gardant son centre lorsque Windows redimensionne. J'ai lu d'autres questions sur la pile concernant notamment:

Google Map réactif? et Centre Google Maps (V3) sur le redimensionnement du navigateur (responsive)

de la deuxième question de la pile j'ai un lien qui m'aide avec une partie du code mais je n'ai toujours pas de chance. C'est le code que j'utilise, lorsque je redimensionne la fenêtre, les cartes ne sont pas du tout redimensionnées.

    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%; }
javascriptjquerygoogle-maps-api-3
57
rob.m

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 une fois 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); 
});
100
rsnickell