Google 地图嵌入模态

Question

我想我们有一个 google 地图的错误。当我直接在页面中嵌入 iframe 时，效果很好。但是在 bootstrap 模式中，它指向错误的位置。我该如何解决这个问题？

http://www.bootply.com/5VyAj2cAx0

Answer 1

我解决了这个问题。

它的发生是因为模态渲染 display:none 属性，地图中的 javascripts 工作错误。如果我们在显示模式后创建 iframe，工作正常。

这个回答说明了。

正确的代码在这里：http://www.bootply.com/eLviOaNr5B

Answer 2

尝试将 embed-responsive 用于您的地图 div，如下所示：

<div class="modal-body">
  <div class="embed-responsive embed-responsive-4by3">
    <div id="map" class="embed-responsive-item"></div><p>
  </div>
</div>

开箱即用，无需任何额外 javascript。

演示：http://a0u.org/map_modal.html

Google 地图嵌入模态

Google maps embedding in a modal

google-maps

bootstrap-modal