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

Question

Ho un Google Maps (V3) nella mia pagina con una larghezza del 100% della pagina 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.

UPDATE È riuscito a funzionare 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); 
}); 

Answer 1

È necessario avere un listener di eventi per quando la finestra ridimensiona. Questo ha funzionato per me (metterlo nella funzione di inizializzazione):

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

Answer 2

Rilevare il browser ridimensionare evento, 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 durante il ridimensionamento della mappa di google tramite altri mezzi (ad esempio con un controllo 'ridimensionabile' di jQuery-UI).

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

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

Answer 3

Alcuni buoni esempi su w3schools.com. Ho usato il seguente e funziona benissimo.

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

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

Answer 4

html: Creare un div con un id di vostra scelta

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

js: Creare una mappa e attaccarlo al div appena creato

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

Centro quando ridimensiona la finestra

var center = map.getCenter(); 

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

Answer 5

Aggiornamento della 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));