谷歌地图jquery标签不加载

Question

谷歌地图不会加载隐藏标签，只在第一个选项卡上，或者如果在加载代码之前按下标签显示，Google地图不会加载。

TABS 
<script> 
$(document).ready(function(){ 

    $('ul.tabs li').click(function(){ 
     var tab_id = $(this).attr('data-tab'); 

     $('ul.tabs li').removeClass('current'); 
     $('.tab-content').removeClass('current'); 

     $(this).addClass('current'); 
     $("#"+tab_id).addClass('current'); 
    }) 

}) 

</script> 

https://jsfiddle.net/gc8putcs/

Answer 1

的问题不是在加法或current类的除去，而是在地图对象的数目要初始化 - 你所表示作为在小提琴的代码。

需要初始化地图对象的多个实例：

function initialize(){ 

    var mapProp = { 
    center:myCenter, 
    zoom:17, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 

    var map = []; 
    var mapElements = document.getElementsByClassName('googleMap'); 
    for(var i = 0; i < mapElements.length; i++){ 
     map[i] = new google.maps.Map(mapElements[i], mapProp); 
    } 

    for(var x = 0; x < map.length; x++){ 
    var marker=new google.maps.Marker({ 
     position:myCenter, 
    }); 

    var marker=new google.maps.Marker({ 
     position:myCenter, 
     animation:google.maps.Animation.BOUNCE 
    }); 
    marker.setMap(map[x]); 
    var infowindow = new google.maps.InfoWindow({ 
     content:"name" 
    }); 
    infowindow.open(map[x],marker); 
    } 

} 

还有一个称为issue与谷歌地图，你可以不适用display: none到容器元素。您需要更改CSS为元素：

.tab-content:not(.current){ 
    position: absolute; 
    left: -200%; 
    padding: 2px; 
} 

.tab-content.current{ 
    display: block;  
} 

Updated fiddle