Google Maps and jQuery Tabs

Question

Hello All,

I have slight problem with Google maps included in simple jQuery Tabs.

Below I pasted the 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;
});

});

Here is the HTML for the tabs:

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

I really don't know what to do to. Is that a general problem with google maps or there is something with my tabs? But they are working just fine with everything else.

Thank you for your help in advance

Answer 1

Are you using v2 or v3 of the Google Maps API? There have been several questions about this problem in the past, for example this one (which also links to some of the other similar questions). It might be worth reading through those and see if any of the suggested solutions work for you.

[edit] Based on your comments below I would suggest to try and use an opacity animation rather than the 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;
});

I have used it myself for a page using Google Maps API v3 and JQuery (not the JQuery tabs, though) and it worked fine for me.

Answer 2

I have solved the problem.

changed hive() in jQuery to css.visibility, so the tabs looks like this.

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

});

Everything works just fine.

Answer 3

I went with a different approach - initialize the map after the tab is activated. Here's my 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;
});

Make sure that the tab with your map's ID matches with the script's. In my case its "location_tab".

Answer 4

I use the exact same Jquery code to create my tabs, however, neither of the solutions work for me. My gmap is still off center and only partially displayed using the "initialize" option (yes, I changed my tab ID correctly), and if I use the css.visibility alterations, it displays my map tab even when it shouldn't