Google 地图在导航选项卡中无法正确显示答案

【问题标题】：Google map doesn't show right in nav-tabGoogle 地图在导航选项卡中无法正确显示
【发布时间】：2015-12-30 15:59:28
【问题描述】：

Google 地图不会显示在导航标签中。它没有显示这个地方，但是当我点击地图时；在 google 中是正确的。

HTML：

<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade" id="locatie"><?php if ($object->hasLocation): ?>
    <div>
        <h2>Kaart</h2>
        <div id="google-map"></div>
        <h2>Street View</h2>
        <div id="google-streetview"></div>
    </div>
    <?php endif; ?></div>
</div>

(function($, exports) {
'use strict';

var GoogleMap = exports.GoogleMap = function(options) {
    this.map = null;
    this.markers = [];
    this.bounds = null;
    this.info = null;
    this.options = $.extend({
        container: '#google-map',
        mapContainer: null,
        map: {}
    }, options || {});
    this.$container = null;
};

CSS

.single-post-tst {
    .entry-content {
    width: 100%;
    margin: 2% 0 10%;
    display: inline-block;
    p {
    font-size: 16px;
    }
    }
    .container-content-single {
    ul, ol {
    margin: 0 0 1.5em 0;
    }
    .nav-tabs {
    border: 1px solid #ddd;
    li {
    margin-bottom: 0;
    border-right: 1px solid #ddd;
    }
    li:last-child {
    border-right: none;
    }
    li a {
    border-radius: 0;
    line-height: 2em;
    margin-right: 0;
    }
    li a:hover {
    background-color: #F29902;
    color: #fff;
    }
    li.active > a {
    padding-bottom: 12px;
    }
    a.nav-link.active {
    background-color: #F29902;
    color: #fff;
    }
    }
    .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    border: none;
    background-color: #F29902;
    color: #fff;
    }
    }
}

#google-map,
#google-streetview {width:100%; height:500px;}

我认为问题在于 JS 中的这一行：

container: '#google-map',

当我把地图从标签中拿出来时，它工作正常。但我找不到任何解决方案来在选项卡中正确显示地图。

它现在显示但不是全宽，我将它添加到 CSS：

    .tab-content.tab-pane,
.tab-pane {
    /* display: none; */
    display: block;
    visibility: hidden;
    position: absolute;
}

.tab-content.active,
.tab-content .tab-pane.active,
.tab-pane.active {
    /* display: block; */
    visibility: visible;
    position: static;
}

It look like this now

当我说宽度：100%；它没有全宽

【问题讨论】：

可能与此问题相同，也许？ stackoverflow.com/questions/28404179/…
这可能是由于 div 及其父级没有所需的宽度和高度。你能分享你正在使用的css吗？ this question 可能有用。
@user5325596 我将css添加到第一篇文章
@QuestionMarks 我只想在一个标签中显示它。

标签： javascript html google-maps

【解决方案1】：

如果地图在辅助选项卡上，它不会得到正确的大小，如果你可以将他放在活动选项卡上，问题就会得到解决。

如果您想在隐藏选项卡上维护地图，请检查如何在地图可见时强制刷新/调整地图大小。

How do I resize a Google Map with JavaScript after it has loaded?

示例代码：

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

编辑，另一种选择：

您还可以为地图设置固定大小，您可以在此处查看代码示例；）

how to deal with google map inside of a hidden div (Updated picture)

【讨论】：

请检查我刚刚添加的另一个选项...另外，请进行测试并将包含地图的选项卡设置为活动状态，并告诉我们地图是否正确显示。
当我将选项卡设置为活动时，它可以工作，但不是当它是第二个选项卡时@miguelmpn 问题出在引导选项卡上；我必须添加这样的东西 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { initialize(); });请参阅：bootply.com/102241 但我不知道在哪里添加我的 js 文件
@Hzr 可以注意到，在该页面上，地图仅在选项卡显示后才被初始化...$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { initialize(); });
这就是我想要的。但我找不到我的代码的区别。
尝试将其添加到jQuery(document).ready(function(){});中

【解决方案2】：

我找到了解决办法：

    .tab-content > .tab-pane {
    display: block;
    height:0;
    overflow:hidden;
}

.tab-content > .active {
    display: block;
    height:auto;
}

【讨论】：