Foundation中的Google Map API显示模式无法正常显示

Question

可能重复:
显示模式中的Google Map API未完全显示

我有一个位于Reveal Modal中的Google Map API.对于那些不知道那是什么的人来说,它基本上是一个隐藏的容器,当点击一个按钮时会弹出它.我在这个显示模式中有谷歌地图API,它显示但不显示所有地图,它只显示其中的三分之一.

如何显示整个地图？

指向我页面的链接:http: //simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

点击谷歌地图按钮,看看手上的问题

显示模态脚本:

<script type="text/javascript">
$(document).ready(function() {
$('#myModal1').click(function() {
$('#myModal').reveal();
});
});
</script>

包含Google Map API的Div

<div id="map_canvas" style="width:600px; height:300px;"></div>
<a class="close-reveal-modal">&#215;</a>
 </div>

单击该按钮可显示Google地图

<div class="five columns">
  <ul class="button-group even three-up" id="contact-button-group">
    <li><a href="#" class="button" data-reveal-id="myModal">Google Map</a></li>
    <li><a href="#" class="button">Button 2</a></li>
    <li><a href="#" class="button">Button 3</a></li>
  </ul>
</div>

Answer 1

显示模态后,使用google.maps.event.trigger(map, 'resize')"map"是地图的实例.