Pusatkan Google Maps (V3) pada perubahan ukuran browser (responsif)

124

Saya memiliki Google Maps (V3) di halaman saya dengan lebar halaman 100% dengan satu penanda di tengah. Ketika saya mengubah ukuran lebar jendela browser saya, saya ingin peta tetap berada di tengah (responsif). Sekarang peta hanya berada di sisi kiri halaman dan semakin kecil.

UPDATE Dapat berfungsi persis seperti yang dijelaskan berkat duncan. Ini adalah kode terakhir:

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);
});
javascript google-maps google-maps-api-3 Gregory Bolkenstijn
sumber
1
kerja bagus! ya, Anda harus terus-menerus menampilkan nilai tengah saat ini ke lingkup global sehingga dapat diambil oleh pendengar dom
efwjames
Jika Anda ke atas lakukan dengan cara ini, maka centertidak perlu menjadi global. Menyediakan center(dan calculateCenter) berada dalam cakupan yang sama dengan map, maka semuanya harus berfungsi. Tentu saja, jika mapbersifat global maka Anda harus memperbaikinya juga :)
Roamer-1888
Mungkin sudah jelas bagi sebagian besar orang, tetapi kode ini muncul SETELAH peta dimuat, jadi setidaknya harus ada di windows.onload
Victoria Ruiz
terima kasih, ini harus menjadi beaviours peta google default
Yukulélé

Jawaban:

143

Anda harus memiliki event listener untuk mengetahui kapan jendela diubah ukurannya. Ini berhasil untuk saya (taruh di fungsi inisialisasi Anda):

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});
duncan
sumber
Ini bekerja dengan sempurna, terima kasih! Tetapi jika seseorang telah memindahkan peta, bagaimana cara mendapatkan pusat peta yang baru? Saya menemukan fungsi getCenter (), tetapi tidak bisa berfungsi dengan benar. map.setCenter (map.getCenter ()); tidak bekerja.
Gregory Bolkenstijn
Anda ingin pendengar acara lain, saya pikir untuk "center_changed" pada objek peta, yang memperbarui variabel global dengan koordinat baru, yang kemudian dapat Anda gunakan di setCenter Anda.
duncan
1
Saya juga mencobanya: var center; google.maps.event.addListener(map, 'center_changed', function() { center = map.getCenter(); }); google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(center); }); Tidak berhasil. Bantuan apa pun akan dihargai.
Gregory Bolkenstijn
Bagaimana dengan "bounds_changed"?
duncan
49
Ini adalah cara termudah: hsmoore.com/blog/…
AO_
83

Deteksi acara pengubahan ukuran browser, ubah ukuran Google Map sambil mempertahankan titik tengah:

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

Anda dapat menggunakan kode yang sama di event handler lain saat mengubah ukuran peta google melalui cara lain (misalnya dengan kontrol 'resizable' jQuery-UI).

Sumber: http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/ kredit ke @smftre untuk tautannya.

Catatan: Kode ini ditautkan dalam komentar @ smftre pada jawaban yang diterima. Saya pikir ada baiknya menambahkannya sebagai jawaban sendiri karena ini benar-benar lebih unggul dari jawaban yang diterima. Ini menghilangkan kebutuhan variabel global untuk melacak titik pusat dan penangan kejadian untuk memperbarui variabel itu.

William Denniss
sumber
Setuju dengan @William, metode ini menghasilkan posisi tengah yang lebih akurat saat peta diubah ukurannya.
lantai sepuluh
jawaban yang diterima tidak berfungsi dengan benar, yang ini berhasil
Tom
Ini adalah solusi terbaik dan berhasil. Bekerja pada setiap acara jendela pengubahan ukuran. Solusi lain tidak berfungsi dengan baik.
zdarsky.peter
1
Ini seharusnya sudah diposting sebagai wiki komunitas.
gustavohenke
Ini berhasil, tetapi saya ingin lebih memahaminya. Apa tepatnya yang dilakukannya google.maps.event.trigger(map, "resize");?
meduz '26
0

html: Buat div dengan id pilihan Anda

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

js: Buat peta dan lampirkan ke div yang baru saja Anda buat

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

Pusatkan saat jendela berubah ukuran

var center = map.getCenter();

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

Diperbarui dari solusi di atas ke es6.

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

addMapListener(map, 'idle', () => center = map.getCenter());
addMapListener(window, 'resize', () => map.setCenter(center));
David Bradshaw
sumber
Anda menggunakan addDomListeneruntuk window, yang merupakan elemen DOM, dan map, yang bukan. Objek peta harus menggunakan google.maps.event.addListeneratau map.addListenerpengendali kejadiannya sendiri .
duncan