Google地图未调整大小

Question

我正试图在一个显示窗口(基础4)上加载google地图，我想我做错了什么，因为我得到了这个结果

​

显示窗口代码如下

    <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过程中被隐藏时，就会发生这种部分呈现。调整大小不足以克服它(根据我的经验)。

查看讨论here。