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é

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

4

Beberapa contoh bagus di w3schools.com. Saya menggunakan yang berikut ini dan itu berfungsi dengan baik.

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

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

— Steve Mulvihill
sumber

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