由于 CSS 选项卡，Google 地图无法正确加载答案

【问题标题】：Google Maps cannot Load Properly due to CSS Tabs由于 CSS 选项卡，Google 地图无法正确加载
【发布时间】：2015-05-14 04:59:55
【问题描述】：

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

以上是出现问题的示例链接。

实际问题是单击街景选项卡时未显示 Google 地图街景。起初我认为这是地图脚本的问题，但后来我发现（在 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 Tabs Documentation

**我没有为此部分添加任何其他内联 CSS 或 JS。如果您需要任何其他信息，请告诉我。

【问题讨论】：

标签： javascript css google-maps jquery-ui-tabs gumby-framework

【解决方案1】：

地图不会渲染，因为它的大小是未知的，因为它是隐藏的。如果您可以在地图显示时触发一些代码，以下代码将解决您的问题：

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

根据：https://developers.google.com/maps/documentation/javascript/reference

【讨论】：

感谢您的回复。你能告诉我在哪里添加那个脚本吗？要我添加地图 api 脚本吗？或者你可以在页面源代码上查看？
当你初始化谷歌地图对象时。调用 settimeout 并触发地图对象上的调整大小事件。 google.maps.event.trigger(在这里传递地图对象，'resize');

【解决方案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>

我希望每个人都觉得这很有用。

【讨论】：