it-swarm.dev

Google Map non viene caricato correttamente all'interno Bootstrap

Sto usando iProperty per creare schede con contenuti per diversi proprietari di proprietà.

Ho hackerato molto i file core per ottenere il sito cercando e funzionando come lo voglio, ma ho un problema con le mappe nelle schede.

Se guardi la pagina seguente e fai clic sulla scheda Posizione, vedrai il problema per cui carica solo una piccola parte della mappa. Per inciso, il problema scompare se si ridimensiona il browser mentre la scheda della mappa è attiva, quindi penso che ci sia qualche problema al caricamento iniziale della mappa.

http://red-ferndevelopment.co.uk/OfficeExperts/index.php?option=com_iproperty&view=property&id=90&Itemid=318

Se qualcuno potesse aiutare, sarei più che grato.

Mille grazie, Austin

2
Austin

Innanzitutto il motivo del ridimensionamento è che la mappa verifica che tutto sia "corretto" al ridimensionamento del browser. Poiché la scheda è nascosta per impostazione predefinita, la dimensione della mappa è più piccola fino all'apertura della scheda, ma nessun evento viene inviato alla mappa per notificare la modifica. Ho già visto problemi simili con google maps e non è proprio un problema, solo qualcosa che può essere perso facilmente.

Ci sono un paio di correzioni per questo, il primo è chiamando map.checkResize() quando la scheda è aperta. Anche se dato che è un componente di terze parti potrebbe non essere facile, ma se sono già state apportate modifiche fondamentali potrebbe non essere un problema. Sostituisci map con la variabile effettiva per la mappa.

Il secondo modo più semplice per "ingannarlo" senza toccarlo è semplicemente fare qualcosa del genere:

jQuery('a[href="#propmap"]').on('click',function(){
   jQuery(window).trigger('resize');
});

Puoi posizionarlo ovunque (purché dopo il caricamento del DOM ovviamente) e dovrebbe risolverlo. Attiva automaticamente un evento di ridimensionamento quando si fa clic sulla scheda, quindi dovrebbe forzare la mappa a funzionare senza un ridimensionamento manuale.

Il primo suggerimento è il migliore in quanto non è alcun tipo di "hack", ma il secondo dovrebbe funzionare a prescindere da cosa.

5
Jordan Ramstad

Le schede Bootstrap (e le giostre e le modali) sono inizialmente impostate per non visualizzarne nessuna, fino a quando non diventano attive, quindi l'elemento principale della tua mappa ha altezza/larghezza pari a 0.

Il modo migliore per risolvere questo problema è chiamare lo script della mappa dopo che la scheda è stata visualizzata, non sul documento pronto. Quando il documento è pronto, non è necessario caricare la mappa per quanto riguarda il browser.

Bootstrap fornisce un metodo per eseguire questa operazione con l'evento shows.bs.tab http://getbootstrap.com/javascript/#tabs

Quindi, hai semplicemente bisogno di qualcosa del genere che crei un'istanza della mappa dopo la scheda è stata visualizzata:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // Your Google map code here
});
2
Seth Warburton

Seth Warburton ha scritto: Bootstrap (e le giostre e le modali) sono inizialmente impostate per non visualizzarne nessuna, fino a quando non diventano attive, quindi l'elemento genitore della tua mappa ha altezza/larghezza pari a 0.

Ho avuto lo stesso problema con Bootstrap3 come te. finalmente ho finito con la semplice soluzione CSS.

.tab-content.tab-pane,
.tab-pane {
    /* display: none; */
    display: block;
    visibility: hidden;
    position: absolute;
}

.tab-content.active,
.tab-content .tab-pane.active,
.tab-pane.active {
    /* display: block; */
    visibility: visible;
    position: static;
}
1
ND_

Puoi aggiungere questa dichiarazione css per prevenire conflitti Bootstrap/Google Map (se l'id della tua mappa è #map). In alcuni casi, risolve il problema:

#map img {
    max-width: none;
}

Tuttavia, potrebbe essere necessario caricare lo script della mappa solo quando viene visualizzata la scheda.

$('a[href="#propmap"]').on('shown', function() {
    // When tab is displayed... will run google map code
    // Your Google map code here
}

Spero che questo possa aiutare!

0
Cyril