谷歌地图不工作在jQuery easytabs

当你点击联系人选项卡，它是加载gmaps，但不正确。（只有地图的左上角）真的很有趣...任何想法？谷歌地图不工作在jQuery easytabs

我的HTML代码

结构：

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

来源

2014-05-06 user3170508

尝试默认宽度设置为您的地图画布格说890px ... –

@KarthikGanesan仍然相同。 – user3170508

1.你的HTML中没有'map-canvas'。 2.什么是你的HTML中的“g”？这是无效的。3.需要什么外部脚本？（一个[fiddle]（http://jsfiddle.net/7ukVe/），显示问题会有帮助...） – geocodezip

您需要包含地图标签后触发地图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

来源

2014-05-08 03:46:32 geocodezip

真棒，非常感谢你！ – user3170508

谷歌地图不工作在jQuery easytabs

回答

相关问题