由於CSS標簽，Google Maps無法正確加載

Question

http://www.bchomescondos.ca/properties/?city=Richmond&id=261681248 http://www.bchomescondos.ca/properties/?city=Richmond&id=261704393

上面是出現問題的示例鏈接。

實際問題是單擊“街景”選項卡時未顯示Google Map街景。 起初我以為這是地圖腳本的問題，但后來（從stackoverflow中的另一個線程的幫助下）我發現問題出在CSS選項卡及其加載方式上。

以某種方式，當“路線圖”選項卡處於活動狀態時，不會顯示街道視圖，而當“街景”選項卡處於活動狀態時，該路線圖顯示為變形。

有人告訴我，我必須在頁面加載期間同時加載所有選項卡，然后隱藏我不希望最初顯示的選項卡。 我想這需要我沒有的JS或jQuery知識。

因此，如果有人可以幫助我，我將有義務。

我使用了簡單的Gumby框架來創建選項卡。 代碼和鏈接如下。

<div class="row">
    <div class="one columns"></div>

    <section class="ten columns tabs" style="margin: 20px 0;">         
        <ul class="tab-nav">
            <li class="active"><a href="#">Google Map</a></li>
            <li> <a href="#">Street View</a></li>
            <li><a href="#">Walk Score</a></li>
        </ul>
        <div class="tab-content active">
            <div id="map-canvas" style="height: 400px; border: 0.5px solid #000;">
            </div>
        </div>
       <div class="tab-content">
            <div id="pano" style="height: 400px; border: 0.5px solid #000;"></div>
        </div>
        <div class="tab-content">
            <div id="ws-walkscore-tile" style="height: 400px; border: 0.5px solid #000;"></div>
        </div>
        <script type='text/javascript' src='http://www.walkscore.com/tile/show-walkscore-tile.php'></script>            
    </section>

    <div class="one columns"></div>

Gumby選項卡文檔

**我沒有為此部分添加任何其他內聯CSS或JS。 如果您需要其他任何信息，請告訴我。

Answer 1

由於地圖是隱藏的，因此其大小未知，因此無法渲染。 如果在顯示地圖時可以觸發一些代碼，則以下代碼將解決您的問題：

google.maps.event.trigger(document.getElementById('pano'), 'resize');

按照： https : //developers.google.com/maps/documentation/javascript/reference

Answer 2

謝謝大家的幫助。 終於我明白了。 順便說一句，調整大小觸發事件在我的情況下不起作用。

主要問題是在文檔加載期間創建街景地圖對象時，它不知道隱藏的div。 這就是它不起作用的原因。

代碼將遵循，但首先讓我解釋一下。 我只是在錨元素的onclick事件上添加了一個函數，該函數使隱藏的選項卡可見。 然后，在該函數中，我創建了地圖對象，該對象起作用了。

function test() {
    var fenway = new google.maps.LatLng(49.040302200000000, -122.281688200000000)    
    var panoramaOptions = {
        position: fenway,
        pov: {
            heading: 34,
            pitch: 10
        }
    };
    var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
    map.setStreetView(panorama);
}

現在是HTML

<section class="ten columns tabs" style="margin: 20px 0;">      
  <ul class="tab-nav">
    <li class="active"><a href="#">Google Map</a></li>
    <li><a href="#" onclick="test()">Street View</a></li>
  </ul>
  <div class="tab-content active">
    <div id="map-canvas" style="height: 400px; border: 0.5px solid #000;">
    </div> 
  </div>
  <div class="tab-content">
    <div id="pano" style="height: 400px; border: 0.5px solid #000;"></div>
    </div>
</section>

希望每個人都覺得有用。