Question

可能重复：
Google Map API inside a Reveal Modal not showing fully

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

如何显示整个地图？

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

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

Reveal Modal脚本：

<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”是地图的实例。

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

1 个答案: