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
źródło
center
nie musi być globalny. Podaniecenter
(icalculateCenter
) są w tym samym zakresiemap
, co wtedy wszystko powinno działać. Oczywiście, jeślimap
jest globalny, musisz to również naprawić :)Odpowiedzi:
Musisz mieć detektor zdarzeń, gdy zmienia się rozmiar okna. To zadziałało dla mnie (umieść to w swojej funkcji inicjalizacji):
źródło
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.Wykryj zdarzenie zmiany rozmiaru przeglądarki, zmienia rozmiar mapy Google, zachowując punkt środkowy:
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.
źródło
google.maps.event.trigger(map, "resize");
?Kilka dobrych przykładów na w3schools.com. Użyłem następujących i działa świetnie.
http://www.w3schools.com/googleapi/google_maps_events.asp
źródło
html: Utwórz div z wybranym identyfikatorem
js: utwórz mapę i dołącz ją do właśnie utworzonego div
Wyśrodkuj po zmianie rozmiaru okna
źródło
Zaktualizowano powyższe rozwiązanie do wersji es6.
źródło
addDomListener
zarówno dla elementuwindow
, który jest elementem DOM, jak i dla elementumap
, który nie jest. Obiekt mapy powinien używaćgoogle.maps.event.addListener
lub własnejmap.addListener
procedury obsługi zdarzeń.