Google Maps and jQuery Tabs

问题:

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

回答1:

I have solved the problem.

changed hide() 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.

回答2:

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

回答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".

回答4:

Initialising the map when the tab is opened is definitely the way to go. If you try to initialise the map on a hidden div, then it will fail to display. Whatever function you have that 'shows' your div, use that function to initialise the map AFTER the div has been shown.

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

Once the map has been loaded, you can safely hide or show the div again without any problems, so it's worth adding a flag to check whether it's already been loaded.

回答5:

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.

回答6:

Google maps does not work well when you hide elements like jquery tabs does when you change tabs.

The simplest solution is to bind google map initialization function to the tabsshow event of the jquery tab object

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

This solution works with any other plugins which depends on width and hide of a DOM element such as the jquery masonry plugin.

回答7:

If you are still struggling to get this right like I was, Try this.

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

      }
});  

I have adapted the other answers above into something more current.

回答8:

I have been struggling with this as well. So I will provide the code which helped me get this done, thanks to the code provided by Fuzz (I'm sorry I can't vote your answer up as I don't have enough reputation...)

I use Advanced Custom Fields for displaying a Google Map. I used the code provided by ACF of the documentation on the acf website and modified the last bit (The "Document ready" part) to be able to show my map using Bootstraps collapse. The div with the map is hidden by the collapse script and when it is shown the javascript for showing the map will be fired. After hiding the map I faced the problem that the maps location settings were gone when showing the map again. With the help of Fuzz's piece of script I got it working correctly. Hopefully this will help others as well.

var hasLoadedMap = false; 
$('#map').on('shown.bs.collapse', function(e){
if(!hasLoadedMap){
$('.acf-map').each(function(){

    render_map( $(this) );

});
 hasLoadedMap = true;
}

});