Zentrieren Sie Google Maps (V3) in der Browsergröße (reaktionsschnell).

124

Ich habe ein Google Maps (V3) auf meiner Seite mit 100% Seitenbreite und einer Markierung in der Mitte. Wenn ich die Breite meines Browserfensters verändere, möchte ich, dass die Karte zentriert bleibt (reagiert). Jetzt bleibt die Karte nur auf der linken Seite und wird kleiner.

UPDATE Dank Duncan kann es genau wie beschrieben funktionieren. Dies ist der endgültige Code:

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
quelle
1
Gut gemacht! Ja, Sie müssen den aktuellen Mittelwert kontinuierlich im globalen Bereich ausgeben, damit er vom Dom-Listener
abgerufen werden kann
Wenn Sie auf diese Weise nach oben gehen, müssen Sie centernicht global sein. Vorausgesetzt, center(und calculateCenter) sind im gleichen Umfang wie map, dann sollte alles funktionieren. Natürlich, wenn mapes global ist, müssen Sie das auch beheben :)
Roamer-1888
Vielleicht ist es für die meisten offensichtlich, aber dieser Code kommt, nachdem die Karte geladen wurde, also sollte er mindestens unter windows.onload sein
Victoria Ruiz
danke, dies sollte die Standardeinstellung für Google Maps sein
Yukulélé

Antworten:

143

Sie benötigen einen Ereignis-Listener für die Größenänderung des Fensters. Dies hat bei mir funktioniert (setzen Sie es in Ihre Initialisierungsfunktion):

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});
Duncan
quelle
Das funktioniert perfekt, danke! Aber wenn jemand die Karte verschoben hat, wie erhalte ich die neue Mitte der Karte? Ich habe die Funktion getCenter () gefunden, kann sie jedoch nicht ordnungsgemäß ausführen. map.setCenter (map.getCenter ()); funktioniert nicht
Gregory Bolkenstijn
Sie möchten einen anderen Ereignis-Listener, ich denke für "center_changed" auf dem Kartenobjekt, der eine globale Variable mit den neuen Koordinaten aktualisiert, die Sie dann in Ihrem setCenter verwenden können.
Duncan
1
Das habe ich auch versucht: var center; google.maps.event.addListener(map, 'center_changed', function() { center = map.getCenter(); }); google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(center); }); Funktioniert nicht. Jede Hilfe wäre dankbar.
Gregory Bolkenstijn
Wie wäre es stattdessen mit "bounds_changed"?
Duncan
49
Dies ist der einfachste Weg: hsmoore.com/blog/…
AO_
83

Erkennen Sie das Größenänderungsereignis des Browsers, ändern Sie die Größe der Google Map unter Beibehaltung des Mittelpunkts:

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

Sie können denselben Code in anderen Ereignishandlern verwenden, wenn Sie die Größe der Google Map auf andere Weise ändern (z. B. mit einem Steuerelement für die Größe der jQuery-Benutzeroberfläche).

Quelle: http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/ Gutschrift an @smftre für den Link.

Hinweis: Dieser Code wurde im Kommentar von @ smftre zur akzeptierten Antwort verlinkt. Ich denke, es lohnt sich, es als eigene Antwort hinzuzufügen, da es der akzeptierten Antwort wirklich überlegen ist. Eine globale Variable zum Verfolgen des Mittelpunkts und ein Ereignishandler zum Aktualisieren dieser Variablen sind nicht mehr erforderlich.

William Denniss
quelle
Stimmen Sie mit @William überein, diese Methode führt zu einer genaueren Mittelposition, wenn die Größe der Karte geändert wird.
Zehnter Stock
akzeptierte Antwort funktionierte nicht richtig, dieser hat den Trick gemacht
Tom
Dies ist die beste und funktionierende Lösung. Funktioniert bei jedem Windows-Ereignis zur Größenänderung. Andere Lösungen funktionierten nicht richtig.
zdarsky.peter
1
Dies sollte wirklich als Community-Wiki gepostet worden sein.
Gustavohenke
Es funktioniert, aber ich würde es gerne besser verstehen. Was genau macht das google.maps.event.trigger(map, "resize");?
Meduz '26.
0

html: Erstellen Sie ein Div mit einer ID Ihrer Wahl

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

js: Erstellen Sie eine Karte und hängen Sie sie an das gerade erstellte Div an

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

Zentrieren, wenn die Fenstergröße geändert wird

var center = map.getCenter();

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

Aktualisierung der obigen Lösung auf es6.

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

addMapListener(map, 'idle', () => center = map.getCenter());
addMapListener(window, 'resize', () => map.setCenter(center));
David Bradshaw
quelle
Sie verwenden das addDomListenersowohl für das window, was ein DOM-Element ist, als auch für das map, was nicht. Das Kartenobjekt sollte den google.maps.event.addListeneroder seinen eigenen map.addListenerEreignishandler verwenden.
Duncan