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

Question

我正在使用 Google Embed 地图选项将地图插入到 Bootstrap 模态中，但模态显示时显示了地图的形状，但只显示了地图的一部分，其余部分为灰色。

这是我使用的代码：

    <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 有关。我认为这会使iframe 中的 Google Maps JavaScript 无法正常工作。要亲自查看，请尝试删除 .modal 类并打开模式。

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

$('#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%"，因为模态窗口没有固定宽度。