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

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.

Answer 2

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 3

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.

Answer 4

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.

Answer 5

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

});

Answer 6

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.