it-swarm.com.de

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

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

UPDATEGibt an, genau wie beschrieben zu funktionieren, dank Duncan. 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);
});
121

Sie benötigen einen Ereignis-Listener, wenn das Fenster seine Größe ändert. Das hat für mich funktioniert (setzen Sie es in Ihre Initialisierungsfunktion):

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

Erkennen Sie das Ereignis zur Größenänderung des Browsers und ä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 jQuery-UI-Steuerelement, dessen Größe sich ändern lässt).

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 in @ smftres Kommentar zur akzeptierten Antwort verlinkt. Ich denke, es lohnt sich, es als eigene Antwort hinzuzufügen, da es der akzeptierten Antwort wirklich überlegen ist. Es entfällt die Notwendigkeit einer globalen Variablen zur Verfolgung des Mittelpunkts und eines Ereignishandlers zur Aktualisierung dieser Variablen. 

83
William Denniss

Einige gute Beispiele auf w3schools.com. Ich habe folgendes verwendet und es funktioniert super. 

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

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

4
Steve Mulvihill

html: Erstellen Sie ein Div mit einer ID Ihrer Wahl

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

js: Erstellen Sie eine Map 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 sich die Fenstergröße ändert

var center = map.getCenter();

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

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));
0
David Bradshaw