如何在引导模态中添加谷歌地图

Question

我正在使用Google Embed map选项将地图插入Bootstrap Modal，但该模式会显示当前地图的形状，但只显示部分地图，其余为灰色。

这是我使用的代码：

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Click For Map</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

在这里我附加了jQuery

$('#myModal').on('shown.bs.modal', (function() {
  var mapIsAdded = false;

  return function() {
    if (!mapIsAdded) {
      $('.modal-body').html('<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d9808.974038062652!2d4.3244048859985185!3d52.07529689519739!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1snl!2snl!4v1419588821379" width="100%" height="400" frameborder="0" style="border:0"></iframe>');

      mapIsAdded = true;
    }    
  };
})());

我无法找到确切的问题，将不胜感激。

Answer 1

它与display: none最初的模态有关。我认为这使得Google Maps JavaScript内部iframe无法正常工作。要亲自查看，请尝试删除.modal该类并打开模式。

最简单的解决方案可能是使用以下shown.bs.modal事件在第一次打开模式时注入iframe ：

$('#myModal').on('shown.bs.modal', (function() {
  var mapIsAdded = false;

  return function() {
    if (!mapIsAdded) {
      $('.modal-body').html('<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d9808.974038062652!2d4.3244048859985185!3d52.07529689519739!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1snl!2snl!4v1419588821379" width="100%" height="400" frameborder="0" style="border:0"></iframe>');

      mapIsAdded = true;
    }    
  };
})());

或看到这个 Codepen

旁边iframe有一个固定的width="800"属性。我建议您将其更改width="100%"为模态窗口没有固定的宽度。