Trung tâm Google Maps (V3) trên thay đổi kích thước trình duyệt (phản hồi)

Tôi có Google Maps (V3) trong trang của mình với chiều rộng 100% trang với một điểm đánh dấu ở giữa. Khi tôi thay đổi kích thước chiều rộng cửa sổ trình duyệt của mình, tôi muốn bản đồ ở giữa (phản hồi). Bây giờ bản đồ chỉ ở bên trái của trang và nhỏ hơn.

CẬP NHẬT Làm cho nó hoạt động chính xác như được mô tả nhờ duncan. Đây là mã cuối cùng:

var center;
function calculateCenter() {
  center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
  calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
  map.setCenter(center);
});

Bạn cần phải có một trình lắng nghe sự kiện khi cửa sổ thay đổi kích thước. Điều này làm việc cho tôi (đặt nó trong chức năng khởi tạo của bạn):

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});

Phát hiện sự kiện thay đổi kích thước trình duyệt, thay đổi kích thước Google Map trong khi duy trì điểm trung tâm:

var map = ...; // your map initialisation code

google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});

Bạn có thể sử dụng cùng một mã trong các trình xử lý sự kiện khác khi thay đổi kích thước bản đồ google thông qua các phương tiện khác (ví dụ: với điều khiển 'thay đổi kích thước' của jQuery-UI).

Nguồn: http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/ tín dụng cho @smftre cho liên kết.

Lưu ý: Mã này đã được liên kết trong nhận xét của @ smftre về câu trả lời được chấp nhận. Tôi nghĩ rằng nó đáng để thêm nó như là câu trả lời của riêng mình vì nó thực sự vượt trội so với câu trả lời được chấp nhận. Nó loại bỏ sự cần thiết của một biến toàn cục để theo dõi điểm trung tâm và một bộ xử lý sự kiện để cập nhật biến đó.

Một số ví dụ hay trên w3schools.com. Tôi đã sử dụng sau đây và nó hoạt động tuyệt vời.

google.maps.event.addDomListener(window, 'resize', function() {
  map.panTo(myLatlng);
});

http://www.w3schools.com/googleapi/google_maps_events.asp

html: Tạo một div với id bạn chọn

<div id="map"></div>

js: Tạo bản đồ và đính kèm vào div bạn vừa tạo

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: new google.maps.LatLng(-33.890542, 151.274856)
});

Trung tâm khi cửa sổ thay đổi kích thước

var center = map.getCenter();

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});

Cập nhật các giải pháp trên cho es6.

let center;
const addMapListener = google.maps.event.addDomListener;

addMapListener(map, 'idle', () => center = map.getCenter());
addMapListener(window, 'resize', () => map.setCenter(center));