display google map in jquery tabs

Question

I have problem with google map when I use jQuery tabs - I see only small part of the map in one of the tabs I search for answer here and found post that says to add script. I added it without any luck

How can I fix it?

$(document).ready(function(){

    $("a.tab").click(function () {
        $(".active").removeClass("active");

        $(this).addClass("active");

        $(".tab_block").slideUp();

        var content_show = $(this).attr("title");
        $("#"+content_show).slideDown();
    });

});

/// addon script: ////
 $(function(){

    $('#maptab').bind('click',function() {
                var w = $('#map_view').width();
                var h = $('#map_view').height();
                $('#map').css({ width: w, height: h });
               google.maps.event.trigger(map, 'resize');

    });

});     

TABS CODE:

<ul class="tabs">
    <li><a href="#" title="content_4" class="tab" id="maptab">MAP</a></li>
    <li><a href="#" title="content_5" class="tab ">tab 5</a></li>
</ul>

<div id="content_4" class="tab_block">

    MAP SCRIPTS GOES HERE...

    <div id='map'></div>


</div>

Answer 1

The problem with initializing the map when it's hidden is that it relies on properties/values that aren't going to work correctly when it's hidden. Instead of initializing the map on page load (within $(function(){ .. } );) you'll want to initialize the map when you click on the tab and show the content.

$("a.tab").click(function () {
    $(".active").removeClass("active");
    $(this).addClass("active");
    $(".tab_block").slideUp();

    var content_show = $(this).attr("title");

    $("#"+content_show).slideDown(400, function(){
        // execute this code after tab content has been displayed
        if ( $(this).find('#map').children().length === 0 ) { 
            // find a #map element within the content area
            // if the #map element has no children initialize the map

            // code to initialize the map/map scripts here
        }
    });
});