Recenter una mappa Google dopo la modifica della larghezza del contenitore

Question

Ho una mappa google impostata con l'API di Javascript V3. Viene visualizzato in un div con larghezza dinamica, mentre il riquadro del contenuto scorre quando si fa clic su un indicatore.

Tutto funziona correttamente, ma una cosa: quando il riquadro scorre, la larghezza della mappa viene modificata, quindi il centro viene spostato a destra (il riquadro è a sinistra). È davvero incoerente, specialmente per risoluzioni ridotte, in cui non è possibile vedere il centro anche dopo che il riquadro è aperto.

Ho provato il trigger "resize", ma non sembra funzionare ... Qualche idea?

Grazie mille!

Answer 1

Chiamare resize da solo non accetterà ciò che è necessario.

Quello che dovete fare è prima (prima che si verifichi un ridimensionamento) ottenere l'attuale centro della mappa

var currCenter = map.getCenter(); 

allora avete bisogno di fare qualcosa di simile alla seguente, dopo che il div viene ridimensionato.

google.maps.event.trigger(map, 'resize'); 
map.setCenter(currCenter); 

dovrebbe fare il trucco

Answer 2

omarello funziona ma non posso upvote esso. Probabilmente hai dimenticato di fare riferimento alla var che definisce le coordinate del tuo centro. Tutto "ridimensiona" non fa altro che aumentare la larghezza e l'altezza attuali, ma non cambia nulla sulla mappa - ancora!

var center = new google.maps.LatLng(39.5, -98.3); 

$(document).ready(function() { 
    $("#fullsize").click(function(e) { 
     e.preventDefault(); 
     $("#map_canvas").css({ 
      width: '1000px'}); 
     google.maps.event.trigger(map, "resize"); 
     map.setCenter(center); 
     }); 
    }); 

Answer 3

Prima impostare una variabile per il centro corrente, quindi utilizzare un listener di eventi per rilevare un ridimensionamento e quindi impostare il centro.

//Get current center 
var getCen = map.getCenter(); 

//Use event listener for resize on window 
google.maps.event.addDomListener(window, 'resize', function() { 
    //Set Center 
    map.setCenter(getCen); 
}); 

Answer 4

Hy ci provate questo;)

Sulla mappa inizializzazione

var currentMapCenter = null; 
google.maps.event.addListener(map, 'resize', function() { 
    currentMapCenter = map.getCenter(); 
}); 

google.maps.event.addListener(map, 'bounds_changed', function() { 
    if (currentMapCenter) { 
    // react here 
     map.setCenter(currentMapCenter); 
    } 
    currentMapCenter = null; 
}); 

Dopo questo basta chiamare quando tou vogliono la mappa di ridimensionamento.

google.maps.event.trigger(map, 'resize');