jquery 탭에 Google지도 표시

Question

jQuery 탭을 사용할 때 Google지도에 문제가 있습니다 - 탭 중 하나에서지도의 일부만 볼 수 있습니다. 나는 여기에 대한 답변을 검색하고 스크립트를 추가하는 게시물을 발견했습니다. 행운을 남기지 않고 추가했습니다.

어떻게 해결할 수 있습니까?

$(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 코드 :

<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

가 숨겨져이 속성 /가 숨겨져 때 올바르게 작동하지 않을 값에 의존 때지도를 초기화의 문제. 페이지로드시 맵을 초기화하는 대신 ($(function(){ .. });) 탭을 클릭하고 내용을 표시 할 때 맵을 초기화하는 것이 좋습니다.

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