Mapy Google i karty jQuery

Question

Mam niewielki problem z mapami Google zawartymi w prostych zakładkach jQuery.

Poniżej wklejony kod:

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

}); 

Oto HTML na zakładkach:

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

ja naprawdę nie wiem, co zrobić, aby. Czy to ogólny problem z mapami google, czy jest coś z moimi zakładkami? Ale działają dobrze na wszystkim innym.

Dziękuję za pomoc z góry

Answer 1

Rozwiązałem problem.

zmieniono hide() w jQuery na css.visibility, więc karty wyglądają tak.

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

}); 

Wszystko działa dobrze.

Answer 2

używasz V2 lub V3 Google Maps API? W przeszłości było kilka pytań dotyczących tego problemu, na przykład: this (które również zawiera linki do niektórych innych podobnych pytań). Warto przeczytać je i sprawdzić, czy któreś z proponowanych rozwiązań będzie działało dla Ciebie.

[edytuj] W oparciu o komentarze poniżej Proponuję spróbować użyć animacji krycia zamiast 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; 
}); 

Używałem go sobie na stronie za pomocą Google Maps API V3 i jQuery (nie karty JQuery) i działało dobrze dla mnie.

Answer 3

Poszedłem z innym podejściem - zainicjuj mapę po aktywacji karty. Oto mój kod:

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

Upewnij się, że karta z mapy identyfikatora mecze ze skryptu. W moim przypadku jest to "location_tab".

Answer 4

Inicjowanie mapy przy otwartej zakładce to zdecydowanie droga. Jeśli spróbujesz zainicjalizować mapę na ukrytym dziale div, nie wyświetli się. Niezależnie od funkcji, która "pokazuje" twój div, użyj tej funkcji, aby zainicjować mapę PO pokazaniu div.

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

Gdy mapa została załadowana, można bezpiecznie ukryć lub pokazać div ponownie bez żadnych problemów, więc warto dodać flagę, aby sprawdzić czy to już załadowany.

Answer 5

Mapy Google nie działają dobrze po ukryciu elementów takich jak karty jquery podczas zmiany kart.

Najprostszym rozwiązaniem jest wiązanie google funkcji map inicjalizacji przypadku tabsshow przedmiotu zakładki 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 
     } 
     }); 

Rozwiązanie współpracuje ze wszystkimi innymi modułami, które w zależności od szerokości i ukrywanie elementu DOM takie jak plug-in jQuery.

Answer 6

Jeśli nadal próbujesz to zrobić tak jak ja, spróbuj tego.

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

     } 
}); 

Zaadaptowałem pozostałe odpowiedzi powyżej na coś bardziej aktualnego.

Answer 7

Ja też walczyłem z tym. Tak więc podam kod, który pomógł mi to zrobić, dzięki kodowi dostarczonemu przez Fuzz (Przykro mi, nie mogę głosować na twoją odpowiedź, ponieważ nie mam wystarczającej reputacji ...)

I użyj Zaawansowanych pól niestandardowych do wyświetlania mapy Google. Użyłem kodu dostarczonego przez ACF dokumentacji na stronie internetowej ACF i zmodyfikowałem ostatni bit (część "Dokument gotowy"), aby móc pokazać moją mapę za pomocą zwijania Bootstraps. Element div z mapą jest ukryty za pomocą skryptu collapse, a gdy zostanie wyświetlony, javascript do wyświetlania mapy zostanie uruchomiony. Po ukryciu mapy stanąłem przed problemem, że ustawienia lokalizacji map zniknęły podczas ponownego wyświetlania mapy. Przy pomocy skryptu Fuzz'a działałem poprawnie. Mam nadzieję, że to pomoże także innym.

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