Google maps responsive resize

Question

Tôi đang cố gắng để có được bản đồ google đáp ứng và thay đổi kích thước trong khi giữ trung tâm của nó khi cửa sổ thay đổi kích thước. Tôi đọc câu hỏi chồng khác liên quan như:

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

từ đống câu hỏi thứ hai I got a link which helps me with part of the code nhưng tôi vẫn không có may mắn. Đây là mã tôi đang sử dụng, khi tôi thay đổi kích thước cửa sổ, các bản đồ không thay đổi kích thước ở tất cả

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

Di chuyển biến bản đồ của bạn vào một phạm vi mà người nghe sự kiện có thể sử dụng nó. Bạn đang tạo bản đồ bên trong hàm initialize() của bạn và không có gì khác có thể sử dụng nó khi tạo theo cách đó.

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