Centra Google Maps (V3) sul ridimensionamento del browser (reattivo)

124

Ho una Google Maps (V3) nella mia pagina con una larghezza della pagina del 100% con un indicatore nel mezzo. Quando ridimensiono la larghezza della finestra del mio browser, vorrei che la mappa rimanesse centrata (reattiva). Ora la mappa rimane sul lato sinistro della pagina e diventa più piccola.

AGGIORNAMENTO Ha funzionato esattamente come descritto grazie a Duncan. Questo è il codice finale:

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
fonte

1

buon lavoro! sì, devi trasmettere continuamente il valore centrale attuale all'ambito globale in modo che possa essere raccolto dall'ascoltatore dom

— efwjames

Se stai andando in alto, fallo in questo modo, quindi centernon ha bisogno di essere globale. Fornire center(e calculateCenter) sono nello stesso ambito di map, quindi tutto dovrebbe funzionare. Ovviamente, se mapè globale, dovrai risolverlo anche tu :)

— Roamer-1888,

Forse è ovvio per la maggior parte, ma questo codice arriva DOPO che la mappa è stata caricata, quindi dovrebbe essere almeno su windows.onload

— Victoria Ruiz

grazie, questo dovrebbe essere il beaviours predefinito di google maps

— Yukulélé

143

È necessario disporre di un listener di eventi per il ridimensionamento della finestra. Questo ha funzionato per me (mettilo nella tua funzione di inizializzazione):

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

— duncan
fonte

Funziona perfettamente, grazie! Ma se qualcuno ha spostato la mappa, come posso ottenere il nuovo centro della mappa? Ho trovato la funzione getCenter (), ma non riesco a farlo funzionare correttamente. map.setCenter (map.getCenter ()); non funziona

— Gregory Bolkenstijn,

Volete un altro ascoltatore di eventi, penso che "center_changed" sull'oggetto mappa, che aggiorna una variabile globale con le nuove coordinate, che è quindi possibile utilizzare in setCenter.

— Duncan,

1

Ho provato anche quello:

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

non funziona. Qualsiasi aiuto sarebbe apprezzato.

— Gregory Bolkenstijn,

Che ne dici di "bounds_changed" invece?

— Duncan,

49

Questo è il modo più semplice: hsmoore.com/blog/…

— AO_

83

Rileva l'evento di ridimensionamento del browser, ridimensiona la Google Map preservando il punto centrale:

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

È possibile utilizzare lo stesso codice in altri gestori di eventi quando si ridimensiona la mappa di Google in altri modi (ad esempio con un controllo "ridimensionabile" dell'interfaccia utente jQuery).

Fonte: http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/ credito a @smftre per il link.

Nota: questo codice è stato collegato nel commento di @ smftre sulla risposta accettata. Penso che valga la pena aggiungerlo come propria risposta poiché è davvero superiore alla risposta accettata. Elimina la necessità di una variabile globale per tenere traccia del punto centrale e di un gestore eventi per aggiornare quella variabile.

— William Denniss
fonte

D'accordo con @William, questo metodo si traduce in una posizione centrale più accurata quando la mappa viene ridimensionata.

— decimo piano

la risposta accettata non funzionava correttamente, questa ha fatto il trucco

— Tom

Questa è la soluzione migliore e funzionante. Funziona su ogni evento di ridimensionamento di Windows. Altre soluzioni non hanno funzionato correttamente.

— zdarsky.peter,

1

Questo avrebbe dovuto essere pubblicato come wiki della community.

— Gustavohenke,

Funziona, ma mi piacerebbe capirlo di più. Cosa fa esattamente google.maps.event.trigger(map, "resize");?

— Meduz "

4

Alcuni buoni esempi su w3schools.com. Ho usato quanto segue e funziona benissimo.

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

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

— Steve Mulvihill
fonte

0

html: crea un div con un ID a tua scelta

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

js: crea una mappa e collegala al div che hai appena creato

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

Centra quando la finestra viene ridimensionata

var center = map.getCenter();

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

— drjorgepolanco
fonte

0

Aggiornato la soluzione di cui sopra a es6.

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

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

— David Bradshaw
fonte

Stai usando addDomListenersia per window, che è un elemento DOM, sia per map, che non lo è. L'oggetto map deve utilizzare il google.maps.event.addListenerproprio map.addListenergestore eventi.

— Duncan,