在 Bootstrap Modal 上嵌入 Google Maps 时，高度和宽度设置为 0px答案

【问题标题】：Height and width are set to 0px when embedding Google Maps on Bootstrap Modal在 Bootstrap Modal 上嵌入 Google Maps 时，高度和宽度设置为 0px
【发布时间】：2015-12-11 07:17:47
【问题描述】：

我正在使用Start Bootstrap 制作的主题。 (http://startbootstrap.com/template-overviews/agency/)

投资组合部分实现为Bootstrap modals 的列表。

我尝试在modal 正文上插入谷歌地图，但它没有显示在屏幕上。

我的地图html代码是

<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
                     .
                     .
                     .
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="modal-body">
                                  .
                                  .
                                  .
                        <div class="map" id="map-ubnorth" style="height:300px;width:500px;position:absolute;">abc</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

但是，如下所示，在我的浏览器中，高度和宽度设置为 0，并且什么也不显示。

有趣的是，当我将地图代码放在模态框之外时，在主页上，它会显示具有指定高度和宽度的地图。

我做错了什么？我一开始以为是 CSS 问题，但好像不是这样。

【问题讨论】：

去掉position:absolute再试试。
它不会改变任何东西
你确定吗，它的工作。如果你提供一个小提琴会很好。

标签： javascript html css twitter-bootstrap google-maps

【解决方案1】：

您需要使用embed-responsive 而不是height 和width 作为地图大小。

<div class="embed-responsive embed-responsive-4by3">
 <div id="map-ubnorth" class="embed-responsive-item"></div>
</div>

示例如下：http://a0u.org/map_modal.html

【讨论】：

【解决方案2】：

当模式变得可见时，您需要在地图实例上触发 resize 事件：

$('#portfolioModal1').on('shown.bs.modal', function (e) {
    // Assuming your map instance is stored in variable 'map'
    google.maps.event.trigger(map, 'resize');
});

【讨论】：