谷歌地圖不工作在jQuery easytabs

Question

當你點擊聯繫人選項卡，它是加載gmaps，但不正確。（只有地圖的左上角）真的很有趣...任何想法？

我的HTML代碼

here is the jsfiddle

結構：

 <div id="menu-container" class="section group"> 
     <div id="menuu" class="col span_8_of_12"> 
      <!-- Navigation Bar --> 
      <div class="menu"> 
       <ul class='tabs'> 
        <li class='tab-biography'><a href="#aboutme">About Me</a></li> 
        <li class='tab-portfolio'><a href="#portfolio">Portfolio</a></li> 
        <li class='tab-photos'><a href="#photos">Photos</a></li> 
        <li class='tab-contact'><a href="#contact">Contact</a></li> 
       </ul> 
      </div> 
     </div> 
     <div id="social-icons" class="col span_4_of_12"> 
      <!-- Social Icons --> 
      <ul class="social-icons"> 
       <li><a href="#"><img src "img/icons/rss.png" g" alt=""/></a></li> 
       <li><a href="#"><img src "img/icons/twitter.png" g" alt=""/></a></li> 
       <li><a href="#"><img src "img/icons/facebook.png" g" alt=""/></a></li> 
      </ul> 
      <!-- /Social Icons --> 
     </div> 
     <!-- /Navigation Bar --> 
    </div> 

gmaps：

function initialize() { 
    var myLatlng = new google.maps.LatLng(41.00527, 28.97696); 
    var mapOptions = { 
     zoom: 16, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
    }); 
} 

    google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

您需要包含地圖標籤後觸發地圖resize事件可見。看着the documentation，有用於該目的的事件掛鉤：

easytabs:after | Fires after a tab has been selected (and after the panel is completely finished transitioning in). | [event, $clicked, $targetPanel, settings]

$('#content').bind('easytabs:after', function() { 
    google.maps.event.trigger(map, 'resize');  
}); 

working fiddle