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() {

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

Hardner

so what is happening, you are not expecting? do you get any js errors? – Nidorf

Im not really sure what is going on, but I have taken screen shotalt text of it. It simply not showing the map after clicking on tab containing it. Image Here freeimagehosting.net/image.php?b34ceb1c2b.gif – Hardner

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.

Hardner

Hey Dom, I have a similar problem here: #23598207 I have tried merging your code above with mine. But mine is a little different. Could you please help me out? – Sluff

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

Breeder

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

Astarte

This is the right idea - load the map when the tab is selected. One problem you get is that Google Maps can't ascertain the correct height if you load it inside a hidden tab. – Teador

@Steve: I'm currently dealing with the same issue. Just a question: Could you explain why this is better than setting the visibility? Isn't this method more expensive, since the map needs to be re-initialized every time (loading the last state of the map), rather than just setting the visibility of the map in its current state? – Linker

If the tab is never selected, you never need to load the map. If it is, you could load it once and then leave it there. It is a double win. – Teador

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

Enure

Answer 5

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.

Weimaraner

Answer 6

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.

Durarte

Im using v3 of API, but unfortunately I have no access to google map script. Im using cms system that's not allowing to edit core code. Any help please...? I have read that thread but cant find anything that I could impemend into my jQuery function – Hardner

See my ammended answer above. – Durarte

Tom, I am having the same problem, but my code is slightly different. I created a question here: #23598207 I am finding limited help on this. I have API v3. Any help would be greatly appreciated. – Sluff

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

Keble

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

});

Cosme