Google Maps and jQuery Tabs

Question

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

Below I pasted the code:

jQuery:

$(document).ready(function() {

             


        

Answer 1

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

Answer 2

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.