觸發標籤時調整谷歌地圖的尺寸​​

Question

下面是我的問題的一個更集中的問題。我有3個地圖，分爲3個選項卡。第一張地圖顯示，另外兩張沒有。我意識到我需要在調用Tab時重新調整地圖的大小。但我不確定在哪裏放置調整大小的代碼。現在我沒有得到任何結果：

$('.nav-tabs a').click(function (e) { 
     e.preventDefault(); 
     $(this).tab('show'); 
     createMap(); 

}) 


function createMap() { 

    var mapOptions = { 
     center: new google.maps.LatLng(30.30, -97.70), 
     zoom: 12, 
     mapTypeControlOptions: { 
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] 
     } 
    }; 

    var map = new google.maps.Map(document.getElementById('map_canvas'), 
     mapOptions); 

    var map2 = new google.maps.Map(document.getElementById('map_canvas2'), 
    mapOptions); 

    var map3 = new google.maps.Map(document.getElementById('map_canvas3'), 
    mapOptions); 

    google.maps.event.addDomListener(window, 'resize', function() { 
    map2.setCenter(30.30, -97.70); 
    }); 
    google.maps.event.addDomListener(window, 'resize', function() { 
    map3.setCenter(30.30, -97.70); 
    }); 

} 

我被稱爲在標籤的點擊功能，但似乎並沒有工作？

Answer 1

當您單擊新選項卡時，您需要觸發resize事件。您需要將Google地圖對象的實例傳遞給事件觸發器。

google.maps.event.trigger(map, 'resize'); 

https://developers.google.com/maps/documentation/javascript/reference#event

Answer 2

請試試這個代碼

$('a.location-map').on('click', function (e) { 
      setTimeout(function(){ initialize(); 
      google.maps.event.trigger(map, 'resize');},1000); 
}); 

Answer 3

試試這個代碼，當頁面加載 加載地圖

$(function() { initializeMap();}); 

的標籤

創造單擊事件後

$('.nav-tabs a').on('click', function() { 
        setTimeout(function() { 
         initializeMap(); 
         google.maps.event.trigger(map, 'resize'); 
        }, 1000); 
       });