jquery - 谷歌地图没有调整大小

Question

我正在尝试在显示窗口（基础 4）上加载谷歌地图，我认为我做错了，因为我得到了这个结果

显示窗口的代码如下

    <a href="#" class="foundation-open">Click Me For A Modal</a>

    <div id="myModal" class="reveal-modal">
  <h2>Awesome. I have it.</h2>
  <style>
      #map_canvas {
        width: 100%;
    height: 400px;
  }
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script>
  function initialize() {
    var map_canvas = document.getElementById('map_canvas');
    var map_options = {
      center: new google.maps.LatLng(44.5403, -78.5463),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(map_canvas, map_options)
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas"></div>
<a class="close-reveal-modal">&#215;</a>
</div>

这是我用来调用揭示的脚本

jQuery(document).ready(function($){
$('a.foundation-open').click(function(e){
    e.preventDefault();
    $('#myModal').foundation('reveal', 'open');
    google.maps.event.trigger(map, "resize");
    });
});

Answer 1

当元素在此initialize过程中被隐藏时，会发生这种部分渲染。调整大小不足以克服它（根据我的经验）。

看看这里的讨论。