Google Maps e le tabs jQuery

Ho un leggero problema con le mappe di Google incluse nelle semplici tabs jQuery.

Di seguito ho incollato il codice:

jQuery:

$(document).ready(function() { //Default Action $(".tab_content").hide(); $("ul.tabs li:first").addClass("active").show(); $(".tab_content:first").show(); //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); $(this).addClass("active"); $(".tab_content").hide(); var activeTab = $(this).find("a").attr("href"); $(activeTab).fadeIn(); return false; }); }); 

Ecco l’HTML per le tabs:

 

Tab1

Tab2

google Map

Tab4

Io davvero non so cosa fare. È un problema generale con google maps o c’è qualcosa con le mie tabs? Ma stanno lavorando bene con tutto il resto.

Grazie in anticipo per il tuo aiuto

Ho risolto il problema.

cambiato hide () in jQuery in css.visibility, quindi le tabs assomigliano a questo.

 $(document).ready(function() { //Default Action $(".tab_content").css({'visibility':'hidden' , 'position':'absolute'}); $("ul.tabs li:first").addClass("active").show(); $(".tab_content:first").css({'visibility':'visible' , 'position':'static'}); //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); $(this).addClass("active"); $(".tab_content").css({'visibility':'hidden' , 'position':'absolute'}); var activeTab = $(this).find("a").attr("href"); $(activeTab).css({'visibility':'visible' , 'position':'static'}); return false; }); }); 

Tutto funziona bene.

Bootstrap3: https://github.com/twbs/bootstrap/issues/2330

 $('a[href="#edit_tab_map"]').on('shown.bs.tab', function(e) { google.maps.event.trigger(map, 'resize'); }); 

Sono andato con un approccio diverso: inizializzare la mappa dopo che la scheda è stata triggersta. Ecco il mio codice:

 //Default Action jQuery(".tab_content").hide(); //Hide all content jQuery("ul.tabs li:first").addClass("active").show(); //Activate first tab jQuery(".tab_content:first").show(); //Show first tab content //On Click Event jQuery("ul.tabs li").click(function() { jQuery("ul.tabs li").removeClass("active"); //Remove any "active" class jQuery(this).addClass("active"); //Add "active" class to selected tab jQuery(".tab_content").hide(); //Hide all tab content var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content jQuery(activeTab).fadeIn(); //Fade in the active content if(activeTab == '#location_tab') { initialize(); } return false; }); 

Assicurati che la scheda con l’ID della tua mappa corrisponda a quella dello script. Nel mio caso il suo “location_tab”.

Inizializzare la mappa quando la scheda è aperta è sicuramente la strada da percorrere. Se si tenta di inizializzare la mappa su un div nascosto, non verrà visualizzato. Qualunque funzione tu abbia che ‘mostra’ il tuo div, usa quella funzione per inizializzare la mappa DOPO che il div è stato mostrato.

 if( !maploaded && $("#" +tab2id+ "content").hasClass("map") ) { LoadGoogleMap(); maploaded = true; } 

Una volta caricata la mappa, puoi tranquillamente hide o mostrare nuovamente il div senza problemi, quindi vale la pena aggiungere un flag per verificare se è già stato caricato.

Stai utilizzando v2 o v3 dell’API di Google Maps? Ci sono state diverse domande su questo problema in passato, ad esempio questo (che si collega anche ad alcune delle altre domande simili). Potrebbe valere la pena leggerli e vedere se alcune delle soluzioni suggerite funzionano per te.

[modifica] In base ai tuoi commenti di seguito suggerirei di provare a utilizzare un’animazione dell’opacità piuttosto che il fadeIn :

 //Default Action $(".tab_content").animate({ opacity: 0 }, 0); $("ul.tabs li:first").addClass("active").show(); $(".tab_content:first").animate({ opacity: 1 }, 0); //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); $(this).addClass("active"); $(".tab_content").animate({ opacity: 0 }, 0); var activeTab = $(this).find("a").attr("href"); $(activeTab).animate({ opacity: 1 }, 500); return false; }); 

L’ho usato io stesso per una pagina utilizzando l’API di Google Maps v3 e JQuery (non le tabs JQuery, però) e ha funzionato bene per me.

Le mappe di Google non funzionano bene quando si nascondono elementi come le tabs jquery quando si modificano le tabs.

La soluzione più semplice è associare la funzione di inizializzazione della mappa di google all’evento tabsshow dell’object tab jquery

 $("#tabs").bind( "tabsshow", function(event, ui) { if(ui.index == 4) { //my map tab has index 4. This will avoid initialization for other tabs initialize(); //google map initialization code } }); 

Questa soluzione funziona con qualsiasi altro plugin che dipende dalla larghezza e dalla nascosta di un elemento DOM come il plug-in muratura jQuery.

Se stai ancora lottando per farlo bene come me, prova questo.

  var hasLoadedMap = false; $( "#tabs" ).tabs({ activate: function( event, ui ) { //console.log(ui.newTab.context.id); if(!hasLoadedMap && ui.newTab.context.id == 'ui-id-4') { //my map tab has index 4. This will avoid initialization for other tabs console.log(ui.newTab.context.id); initialize(); //google map initialization code hasLoadedMap = true; } } }); 

Ho adattato le altre risposte sopra in qualcosa di più attuale.

Ho lottato anche con questo. Quindi fornirò il codice che mi ha aiutato a ottenere questo risultato, grazie al codice fornito da Fuzz (mi dispiace non poter votare la tua risposta perché non ho abbastanza reputazione …)

Uso i campi personalizzati avanzati per la visualizzazione di una mappa di Google. Ho usato il codice fornito da ACF della documentazione sul sito Web di acf e ho modificato l’ultimo bit (la parte “Document ready”) per poter mostrare la mia mappa utilizzando la compressione di Bootstrap. Il div con la mappa è nascosto dallo script di compressione e quando viene visualizzato il javascript per mostrare la mappa verrà generato. Dopo aver nascosto la mappa ho affrontato il problema che le impostazioni della posizione delle mappe erano sparite quando si mostrava di nuovo la mappa. Con l’aiuto della sceneggiatura di Fuzz, ho funzionato correttamente. Spero che questo aiuti anche gli altri.

 var hasLoadedMap = false; $('#map').on('shown.bs.collapse', function(e){ if(!hasLoadedMap){ $('.acf-map').each(function(){ render_map( $(this) ); }); hasLoadedMap = true; } });