Javascript 在引导模式下嵌入谷歌地图时，高度和宽度设置为0px

我使用的主题是

Start Bootstrap

。（）

portfolio部分实现为

引导模式的列表

我试图在
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>


.
.
.
.
.
.
abc

但是，正如您在下面看到的，在我的浏览器中，高度和宽度设置为0，并且不显示任何内容


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

我做错了什么？起初我认为这是一个CSS问题，但看起来并非如此。
当模式变为可见时，需要在地图实例上触发
resize
事件：

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

对于地图大小，您需要使用
embed-responsive
而不是
height
和
width

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



下面是一个例子：
删除
位置：绝对值，然后再试一次。它不会改变任何东西。你可以肯定，它对你有用。如果你能提供一把小提琴就好了。