Foundation中的Google Map API显示模式显示不正确 [英] Google Map API in Foundation reveal modal not displaying properly

问题描述

可能存在重复：

Possible Duplicate:
Google Map API inside a Reveal Modal not showing fully

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

I have a Google Map API located within a Reveal Modal. For those that do not know what that is, it is basically a hidden container that pops up when a button is clicked. I have within this reveal modal the Google Map API, which is displaying, but not displaying all of the map, it is only showing maybe a third of it.

我如何获得整个地图？

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

单击Google地图按钮查看手中的问题

CLICK ON THE GOOGLE MAP BUTTON TO SEE THE ISSUE AT HAND

Reveal Modal脚本：

The Reveal Modal script:

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

包含Google Map API的Div

The Div which contains the Google Map API

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

点击按钮后，显示Google Map

The button which when clicked, reveals the Google Map

<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>

推荐答案

在显示模态之后，使用 google.maps.event.trigger（map，'resize'）其中map是地图的实例。

After the modal is shown use google.maps.event.trigger(map, 'resize') where "map" is the instance of your map.

这篇关于Foundation中的Google Map API显示模式显示不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！