谷歌地圖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