Google Maps responsive Größenanpassung

Question

Ich versuche Google Maps reaktionsschnell zu bekommen und die Größe zu ändern, während ich die Fenstergröße beibehält. Ich lese andere Stapel Fragen in Bezug auf wie:

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

von der zweiten Stapel Frage I got a link which helps me with part of the code aber ich habe noch kein Glück. Dies ist der Code, den ich verwende, wenn ich die Größe des Fensters, wird der Karten die Größe nicht auf allen

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

Ihre Karte Variable Umzug in ein Bereich, in dem der Ereignis-Listener sie verwenden kann. Sie erstellen die Karte innerhalb Ihrer initialize() -Funktion und nichts anderes kann sie verwenden, wenn sie auf diese Weise erstellt wird.

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