javascript - Bootstrap 模式对话框缺少嵌入其中的谷歌地图 - 为什么？

Question

我的网页上有几个链接，每个链接都描述了具有不同位置数据的不同地点。当用户点击任何链接时，我想呈现一个嵌入了谷歌地图的模态 Bootstrap 对话框——当然，对于每个链接，显示的位置应该不同。

我有 Bootstrap 对话框的 html 代码:

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js"></script>

<div class="modal fade" id="myMapModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Modal title</h4>

      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row">
            <div id="map-canvas" class=""></div>
          </div>
        </div>
      </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>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY">
</script>

<script type='text/javascript'>
  var element = $(this);
  var map;

  function initialize(myCenter) {
    var marker = new google.maps.Marker({
      position: myCenter
    });

    var mapProp = {
      center: myCenter,
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);
    marker.setMap(map);
  };
</script>

<script type='text/javascript'>
  $('#myMapModal').on('shown.bs.modal', function(e) {
    console.log("tutaj");
    var element = $(e.relatedTarget);
    var data = element.data("lat").split(',')
    initialize(new google.maps.LatLng(data[0], data[1]));
    google.maps.event.trigger(map, 'resize');
  });
</script>

<a href="#" data-lat="10, 20" data-toggle="modal" , data-target="#myMapModal">map</a>

<a href="#" data-lat="20, 30" data-toggle="modal" , data-target="#myMapModal">map2</a>

等等

然而，当用户点击这些链接中的任何一个时，模式会出现，但不包含任何谷歌地图。它看起来像这样:

并且开发者的控制台没有显示任何警告或错误。

这里会发生什么情况？

Answer 1

您应该为 #map-canvas 设置尺寸，因为所有内容都使用 position: absolute。

工作示例:

var element = $(this);
var map;
function initialize(myCenter) {
  var marker = new google.maps.Marker({
    position: myCenter
  });

  var mapProp = {
    center: myCenter,
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);
  marker.setMap(map);
};

$('#myMapModal').on('shown.bs.modal', function(e) {
  console.log("tutaj");
  var element = $(e.relatedTarget);
  var data = element.data("lat").split(',')
  initialize(new google.maps.LatLng(data[0], data[1]));
  google.maps.event.trigger(map, 'resize');
});

#map-canvas {
  width: 100%;
  height: 500px;
}

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js"></script>

<a href="#" data-lat="10, 20" data-toggle="modal" , data-target="#myMapModal">map</a>

<a href="#" data-lat="20, 30" data-toggle="modal" , data-target="#myMapModal">map2</a>

<div class="modal fade" id="myMapModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Modal title</h4>

      </div>
      <div class="modal-body">
        <div id="map-canvas" class=""></div>
      </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>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->