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