谷歌地圖在jquery標籤頁插件中無法正確顯示

我正在更新房地產經紀人的網站，並且希望將谷歌地圖添加到對象頁面。地圖將顯示在標籤容器中。對於我使用IDTabs的標籤，一個小的jQuery插件。谷歌地圖在jquery標籤頁插件中無法正確顯示

地圖呈現，但似乎地圖本身的位置關閉。 UI呈現全角，但地圖本身不。在移動地圖時，它也不會移過容器的寬度。窗口大小調整後，會重新初始化，然後地圖會覆蓋地圖UI容器的全部寬度。

您可以點擊此處查看：http://symvo.li/harbourtown/rental.php?id=1 （點擊地圖）

代碼：

var map; 
function initialize() { 
    geocoder = new google.maps.Geocoder(); 

        var mapOptions = { 
         zoom: 8, 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
        }; 
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

        geocoder.geocode({ 'address': 'Kaya Sa 1, Bonaire'}, function(results, status) { 
         if(status == google.maps.GeocoderStatus.OK) { 
          map.setCenter(results[0].geometry.location); 
          var marker = new google.maps.Marker({ 
           map: map, 
           position: results[0].geometry.location 
          }); 
         } 
        }); 

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

我怎樣才能確保地圖正確呈現？

來源

2013-07-19 Joey

我解決了這個職位的幫助下問題：Why doesn't my map render in a jQuery tab?

因爲地圖中隱藏的標籤渲染，地圖的大小不能正確設置。爲了解決這個問題，我在點擊標籤時調用了一個resize事件。

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

來源

2013-07-19 12:45:38 Joey

谷歌地圖在jquery標籤頁插件中無法正確顯示

回答

相關問題