Google Maps et jQuery Tabs

Question

J'ai un léger problème avec les cartes Google incluses dans les simples onglets jQuery.

Ci-dessous je collé le code:

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

}); 

Voici le code HTML pour les onglets:

<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> 

Je ne sais vraiment pas quoi faire pour. Est-ce un problème général avec Google Maps ou il y a quelque chose avec mes onglets? Mais ils travaillent très bien avec tout le reste.

Merci pour votre aide à l'avance

Answer 1

J'ai résolu le problème.

changé hide() dans jQuery à css.visibility, de sorte que les onglets ressemble à ceci.

$(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; 
    }); 

}); 

Tout fonctionne très bien.

Answer 2

Utilisez-vous v2 ou v3 de l'API Google Maps? Il y a eu plusieurs questions sur ce problème dans le passé, par exemple this (qui renvoie également à d'autres questions similaires). Il pourrait être utile de les lire et de voir si l'une des solutions proposées fonctionne pour vous.

[modifier] Sur la base de vos commentaires ci-dessous, je vous suggère d'essayer d'utiliser une animation d'opacité plutôt que le 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; 
}); 

Je l'ai utilisé moi-même pour une page en utilisant l'API Google Maps v3 et JQuery (pas les onglets JQuery, cependant) et cela a bien fonctionné pour moi.

Answer 3

Je suis allé avec une approche différente - initialiser la carte après l'activation de l'onglet. Voici mon code:

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

Assurez-vous que l'onglet avec l'ID de votre carte correspond à ce script. Dans mon cas son "location_tab".

Answer 4

L'initialisation de la carte lorsque l'onglet est ouvert est définitivement la solution. Si vous essayez d'initialiser la carte sur une div masquée, elle ne s'affichera pas. Quelle que soit la fonction que vous avez qui «montre» votre div, utilisez cette fonction pour initialiser la carte APRÈS que la div a été montrée.

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

Une fois que la carte a été chargé, vous pouvez sans risque masquer ou afficher la div nouveau sans aucun problème, il est donc intéressant d'ajouter un drapeau pour vérifier si elle a déjà été chargé.

Answer 5

Google maps ne fonctionne pas correctement lorsque vous masquez des éléments comme les onglets jquery lorsque vous changez d'onglet.

La solution la plus simple consiste à lier la fonction d'initialisation de la carte Google à l'événement tabsshow de l'objet de l'onglet 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 
     } 
     }); 

Cette solution fonctionne avec tous les autres modules externes qui dépend de la largeur et de peau d'un élément DOM tel que le plugin jquery maçonnerie.

Answer 6

Si vous avez encore du mal à obtenir ce droit comme je l'étais, Essayez ceci.

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

     } 
}); 

J'ai adapté les autres réponses ci-dessus en quelque chose de plus actuel.

Answer 7

J'ai aussi eu des problèmes avec cela. Je vais donc fournir le code qui m'a aidé à faire cela, grâce au code fourni par Fuzz (Je suis désolé de ne pouvoir voter votre réponse car je n'ai pas assez de réputation ...)

I utilisez les champs personnalisés avancés pour afficher une carte Google. J'ai utilisé le code fourni par ACF de la documentation sur le site web acf et j'ai modifié le dernier bit (la partie "Document prêt") pour pouvoir montrer ma carte en utilisant l'effondrement Bootstraps. Le div avec la carte est caché par le script de collapse et quand il est montré le javascript pour montrer la carte sera tiré. Après avoir caché la carte, j'ai été confronté au problème que les paramètres de localisation des cartes avaient disparu en affichant à nouveau la carte. Avec l'aide du script de Fuzz, je l'ai fait fonctionner correctement. Espérons que cela aidera aussi les autres.

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