Google Maps e schede jQuery

Question

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

Sotto 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 schede:

<div class="bluecontainer"> 
    <ul class="tabs"> 
     <li><a href="#tab1">Tab1</a></li> 
     <li><a href="#tab2">Tab2</a></li> 
     <li><a href="#tab3">Tab3</a></li> 
     <li><a href="#tab4">Tab4</a></li> 
    </ul> 
    <div class="tab_container"> 
     <div id="tab1" class="tab_content"> 
      <h2>Tab1</h2> 
     </div> 
     <div id="tab2" class="tab_content"> 
      <h2>Tab2</h2> 
     </div> 
     <div id="tab3" class="tab_content"> 
      <div> 
       google Map 
      </div> 
     </div> 
     <div id="tab4" class="tab_content"> 
      <h2>Tab4</h2> 
     </div> 
    </div> 
</div> 

io davvero non so cosa fare per. È un problema generale con google maps o c'è qualcosa con le mie schede? Ma stanno lavorando bene con tutto il resto.

Grazie per il vostro aiuto in anticipo

Answer 1

Ho risolto il problema.

cambiato hide() in jQuery in css.visibility, quindi le schede sono come 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 perfettamente.

Answer 2

stai usando v2 o v3 delle API di Google Maps? Ci sono state diverse domande su questo problema in passato, ad esempio this (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] Sulla base di vostri commenti qui sotto vorrei suggerire di provare e usare un'animazione di 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; 
}); 

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

Answer 3

Sono andato con un approccio diverso: inizializzare la mappa dopo che la scheda è stata attivata. 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; 
}); 

Assicurarsi che la scheda con il vostro mappa ID corrisponde con lo script di. Nel mio caso il suo "location_tab".

Answer 4

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 che la carta è stata caricata, è possibile nascondere in modo sicuro o mostrare nuovamente il div senza problemi, quindi vale la pena di aggiungere un flag per controllare se è già stato caricato.

Answer 5

Google maps non funziona bene quando si nascondono elementi come le schede jquery quando si cambiano le schede.

La soluzione più semplice è quella di impegnare google funzione map inizializzazione all'evento tabsshow dell'oggetto scheda 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 altri plugin che dipende dalla larghezza e nascondere di un elemento DOM come la plugin per muratura jquery.

Answer 6

Se stai ancora lottando per farlo bene come ero, 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.

Answer 7

Sono stato alle prese anche con questo. Quindi fornirò il codice che mi ha aiutato a ottenere questo risultato, grazie al codice fornito da Fuzz (mi dispiace non posso votare la risposta perché non ho abbastanza reputazione ...)

I utilizzare i campi personalizzati avanzati per visualizzare 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; 
} 

}); 

Answer 8

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'); 
    });