Javascript 谷歌地图没有'；在导航选项卡中不显示右侧

谷歌地图不会显示在导航选项卡中。 它不显示地点，但当我点击地图时；这在谷歌是正确的

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>

CSS

我认为问题在于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;
}

---

当我说宽度：100%；如果地图位于辅助选项卡上，则无法获得正确的大小，如果您可以将其放置在活动选项卡上，则问题将得到解决

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

示例代码：

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

编辑，另一个选项：

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

我找到了一个解决方案：

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

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

---

可能是同一个问题，也许？这可能是由于div及其父对象没有所需的宽度和高度造成的。你能分享你正在使用的css吗？可能有用。@user5325596我将css添加到第一个post@QuestionMarks我只想在一个选项卡中显示它。请检查我刚才添加的其他选项。。。另外，请进行测试并将包含地图的选项卡设置为活动，并告诉我们地图是否正确显示。当我将选项卡设置为活动时，它会工作，但当它是第二个选项卡@miguelmpn时，问题在于引导选项卡；我必须添加类似于$（'a[data toggle=“tab”]'）.on（'show.bs.tab'，函数（e）{initialize（）；}）；看：但我不知道在哪里添加我的jsfile@Hzr您可以注意到，在该页面上，只有在显示选项卡后，地图才会初始化<代码>$（'a[data toggle=“tab”]”）。on（'show.bs.tab'，函数（e）{initialize（）；}）jQuery（document）.ready（function（）{}）中

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

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

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