Google Maps เป็นศูนย์กลาง (V3) ในการปรับขนาดเบราว์เซอร์ (ตอบสนอง)

ฉันมี Google Maps (V3) ในหน้าของฉันที่ความกว้าง 100% โดยมีเครื่องหมายหนึ่งตัวอยู่ตรงกลาง เมื่อฉันปรับขนาดความกว้างของหน้าต่างเบราว์เซอร์ฉันต้องการให้แผนที่อยู่ตรงกลาง (ตอบสนอง) ตอนนี้แผนที่จะอยู่ที่ด้านซ้ายของหน้าและเล็กลง

UPDATE ทำให้มันทำงานได้ตรงตามที่อธิบายไว้ด้วย duncan นี่คือรหัสสุดท้าย:

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

คุณต้องมีตัวฟังเหตุการณ์เมื่อปรับขนาดหน้าต่าง สิ่งนี้ใช้ได้ผลสำหรับฉัน (ใส่ไว้ในฟังก์ชันเริ่มต้นของคุณ):

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

ตรวจจับเหตุการณ์ปรับขนาดเบราว์เซอร์ปรับขนาด Google Map ในขณะที่รักษาจุดกึ่งกลาง:

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

คุณสามารถใช้รหัสเดียวกันในตัวจัดการเหตุการณ์อื่น ๆ เมื่อปรับขนาดแผนที่ Google ด้วยวิธีอื่น (เช่นด้วยการควบคุม jQuery-UI 'ปรับขนาดได้')

ที่มา: http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/ให้เครดิต@smftreสำหรับลิงก์

หมายเหตุ: รหัสนี้เชื่อมโยงในความคิดเห็นของ @ smftre ในคำตอบที่ยอมรับ ฉันคิดว่ามันคุ้มค่าที่จะเพิ่มเป็นคำตอบของตัวเองเนื่องจากมันดีกว่าคำตอบที่ยอมรับจริงๆ ไม่จำเป็นต้องมีตัวแปรส่วนกลางเพื่อติดตามจุดศูนย์กลางและตัวจัดการเหตุการณ์เพื่ออัปเดตตัวแปรนั้น

ตัวอย่างดีๆใน w3schools.com ฉันใช้สิ่งต่อไปนี้และได้ผลดี

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

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

html: สร้าง div ด้วย id ที่คุณเลือก

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

js: สร้างแผนที่และแนบเข้ากับ div ที่คุณเพิ่งสร้างขึ้น

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

จัดกึ่งกลางเมื่อหน้าต่างปรับขนาด

var center = map.getCenter();

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

อัปเดตโซลูชันข้างต้นเป็น es6

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

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