fitBounds() mostra l'intera terra (se la mappa viene prima nascosta e quindi visualizzata)

Question

Ho un mazzo o marcatori e voglio mostrare solo l'area che li contiene. Ho trovato una lunga lista di domande simili (vedi in fondo per alcuni), ma nessuna delle soluzioni funziona per me. Il LatLngBounds è compilato correttamente, ma quando chiamo fitBounds il risultato sarà il seguente: Invece di: Qualcuno può individuare un errore evidente nel mio codice?

var opt = { 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
map = new google.maps.Map(document.getElementById("map"),opt); 
var box = new google.maps.LatLngBounds(); 
for(var i=0;i<list.length;i++){ 
    var p = new google.maps.LatLng(list[i].lat,list[i].lon); 
    var marker = new google.maps.Marker({ 
     position: p, 
     map: map 
    }); 
    box.extend(p); 
} 
map.fitBounds(box); 
map.panToBounds(box); 

Alcuni dei posti che ho letto e provato (elenco non completo):

• Google Maps v3 - Automating Zoom Level?
• Google maps V3 custom marker images and fitBounds()
• Google Maps with fitBounds don't zoom
• fitbounds() in Google maps api V3 does not fit bounds

---

Modifica: questo accade in realtà se (come faccio nella mia applicazione) la mappa è inizialmente nascosta e mostrata solo più tardi. mi nascondo in questo modo:

$('#map').hide();

e mostrarlo:

$('#map').show(function(){ 
    //this is necessary because otherwise 
    //the map will show up in the upper left corner 
    //until a window resize takes place 
    google.maps.event.trigger(map, 'resize'); 
}); 

Qualsiasi indizio sul perché questo accade e come evitare che (a parte l'inizializzazione la mappa quando indicato prima) ?

Nota a margine, se si imposta lo zoom e il centro quando si dichiara l'oggetto della mappa (ad esempio, io non uso fitBounds()), la mappa verrà visualizzata correttamente, anche dopo un nascondimento/mostra. Non riesco a impostare lo zoom e il centro, perché l'elenco dei punti viene recuperato altrove e non so dove sono in anticipo.

Answer 1

Risolto (non in un modo carino, però). Quello che ho finito di fare è stato inizializzare lo LatLngBounds con i punti durante il caricamento della pagina, ma la panoramica e lo zoom solo quando si mostra la mappa. In questo modo funziona correttamente. E.g.

var box; 
function init(){ 
    var opt = { 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map"),opt); 
    box = new google.maps.LatLngBounds(); 
    for(var i=0;i<list.length;i++){ 
     var p = new google.maps.LatLng(list[i].lat,list[i].lon); 
     var marker = new google.maps.Marker({ 
      position: p, 
      map: map 
     }); 
     box.extend(p); 
    } 
} 

e poi, più tardi (cliccare su un pulsante per esempio)

function showMap(){ 
    $('#map').show(function(){ 
    google.maps.event.trigger(map, 'resize'); 
    map.fitBounds(box); 
    map.panToBounds(box); 
    }); 
} 

Funziona, ma non mi piace avere che var globale in giro. Implemento lo stesso identico comportamento usando OpenLayers e funziona correttamente senza la necessità di questo hack. Se qualcuno ha una soluzione migliore, si prega di postarlo e lo accetterò se funziona.

Grazie a @Engineer e @Matt Handy per avermi aiutato a eliminare una possibile fonte di errori.

Answer 2

Modifica per le vostre esigenze

map.fitBounds(bounds); 

var listener = google.maps.event.addListener(map, "idle", function() { 
    if (map.getZoom() > 16) map.setZoom(16); 
    google.maps.event.removeListener(listener); 
}); 

Answer 3

ho provato il codice in un fiddle, e funziona come previsto.

Quindi il motivo per cui il codice non funziona deve essere nella definizione dei punti dati (come già suggerito dall'Ingegnere). Confronta la tua definizione di elenco con la mia e controlla se sono diversi.