Wyśrodkuj Mapy Google (V3) przy zmianie rozmiaru przeglądarki (responsywne)

124

Na mojej stronie mam Google Maps (V3) o szerokości 100% z jednym znacznikiem pośrodku. Kiedy zmieniam szerokość okna przeglądarki, chciałbym, aby mapa była wyśrodkowana (responsywna). Teraz mapa pozostaje po lewej stronie strony i zmniejsza się.

AKTUALIZACJA Udało się to działać dokładnie tak, jak opisano dzięki duncan. To jest ostateczny kod:

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
źródło

1

dobra robota! tak, musisz w sposób ciągły wyprowadzać bieżącą wartość środkową do zakresu globalnego, aby mogła zostać odebrana przez odbiorcę dom

— efwjames

Jeśli idziesz na szczyt, zrób to w ten sposób, to centernie musi być globalny. Podanie center(i calculateCenter) są w tym samym zakresie map, co wtedy wszystko powinno działać. Oczywiście, jeśli mapjest globalny, musisz to również naprawić :)

— Roamer-1888,

Może jest to oczywiste dla większości, ale ten kod pojawia się PO załadowaniu mapy, więc powinien być przynajmniej na windows.onload

— Victoria Ruiz

dzięki, to powinno być domyślne zachowanie map google

— Yukulélé

143

Musisz mieć detektor zdarzeń, gdy zmienia się rozmiar okna. To zadziałało dla mnie (umieść to w swojej funkcji inicjalizacji):

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

— duncan
źródło

To działa idealnie, dzięki! Ale jeśli ktoś przeniósł mapę, jak mogę uzyskać nowy środek mapy? Znalazłem funkcję getCenter (), ale nie mogę jej zmusić do prawidłowego działania. map.setCenter (map.getCenter ()); nie działa.

— Gregory Bolkenstijn

Potrzebujesz innego detektora zdarzeń, myślę, że dla "center_changed" na obiekcie mapy, który aktualizuje zmienną globalną nowymi współrzędnymi, których możesz następnie użyć w swoim setCenter.

— duncan

1

Ja też próbowałem:

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

nie działa. Każda pomoc będzie mile widziana.

— Gregory Bolkenstijn

A może zamiast tego „bounds_changed”?

— duncan

49

To najłatwiejszy sposób: hsmoore.com/blog/…

— AO_

83

Wykryj zdarzenie zmiany rozmiaru przeglądarki, zmienia rozmiar mapy Google, zachowując punkt środkowy:

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

Możesz użyć tego samego kodu w innych programach obsługi zdarzeń podczas zmiany rozmiaru mapy Google w inny sposób (np. Za pomocą kontrolki jQuery-UI „resizable”).

Źródło: http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/ kredyt @smftre za link.

Uwaga: ten kod został powiązany w komentarzu @ smftre dotyczącym zaakceptowanej odpowiedzi. Myślę, że warto dodać to jako własną odpowiedź, ponieważ jest naprawdę lepsza od zaakceptowanej odpowiedzi. Eliminuje potrzebę stosowania zmiennej globalnej do śledzenia punktu środkowego oraz obsługi zdarzeń do aktualizowania tej zmiennej.

— William Denniss
źródło

Zgadzam się z @William, ta metoda skutkuje dokładniejszym położeniem środka, gdy rozmiar mapy jest zmieniany.

— dziesiąte piętro

zaakceptowana odpowiedź nie działała poprawnie, ta

— Tom

To najlepsze i działające rozwiązanie. Działa na każdym zdarzeniu zmiany rozmiaru okien. Inne rozwiązania nie działały poprawnie.

— zdarsky.peter

1

To naprawdę powinno zostać opublikowane jako wiki społeczności.

— gustavohenke

Działa, ale chciałbym to lepiej zrozumieć. Co dokładnie robi google.maps.event.trigger(map, "resize");?

— meduz '26

4

Kilka dobrych przykładów na w3schools.com. Użyłem następujących i działa świetnie.

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

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

— Steve Mulvihill
źródło

0

html: Utwórz div z wybranym identyfikatorem

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

js: utwórz mapę i dołącz ją do właśnie utworzonego div

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

Wyśrodkuj po zmianie rozmiaru okna

var center = map.getCenter();

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

— drjorgepolanco
źródło

0

Zaktualizowano powyższe rozwiązanie do wersji es6.

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

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

— David Bradshaw
źródło

Używasz addDomListenerzarówno dla elementu window, który jest elementem DOM, jak i dla elementu map, który nie jest. Obiekt mapy powinien używać google.maps.event.addListenerlub własnej map.addListenerprocedury obsługi zdarzeń.

— duncan