Google Maps API v3 + Foundation 4 Reveal模式显示不正常

在我们开始之前，我只想说明一下，我已经从头到尾地阅读了下面的50篇文章，并试图复制解决方案，但到目前为止还不能。

Google Map API在Foundation显示模式显示不正常

显示模式内的谷歌地图API未完全显示

如何使用google.maps.event。触发(地图,& # 39;调整# 39;)

以及Zurb的基金会问题列表-> https://github.com/zurb/foundation/issues

我的问题似乎是相同的，我甚至检查了他的源代码http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html，看起来他得到了他的修复，但我不能得到我的修复。

不确定是否是基础3和4的差异导致了我的问题(因为那些SO帖子几乎是一年前的)，但无论如何，它似乎不像调整大小的方法是有效的。

这是一个链接到我的基本页面db -> http://db.tt/gdl3wVox

正如你所看到的，小地图工作得很好，但当你点击链接"查看大图"时，有两个问题。

主要问题-只有1/3的地图在渲染。在Chrome或IE中检查元素或打开开发工具(F12)会导致地图重新渲染并适合div的全宽度。
1. 小问题-显示的地图不像小地图那样以标记为中心。

foundation.css除了添加这两个元素之外没有被自定义。所以你不必去挖掘他们的风格，这里是:

#mini-map  {
  min-width: auto;
  max-width: 100%;
  width: 220px;
  min-height: auto;
  max-height: 100%;
  height: 154px; }
#big-map  {
  min-width: auto;
  max-width: 100%;
  width: 600px;
  min-height: auto;
  max-height: 100%;
  height: 300px; }

我已经实现了google.maps.event.trigger(map, 'resize');修复描述在其他帖子(取代map与bigmap，因为我有两个地图)

         <script>
            var ourLocation = new google.maps.LatLng(46.213769, -60.266018);
            function initialize() {
                var mapOptions = {
                    center: ourLocation,
                    zoom: 14,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                minimap = new google.maps.Map(document.getElementById("mini-map"), mapOptions);
                bigmap = new google.maps.Map(document.getElementById("big-map"), mapOptions);
                minimarker = new google.maps.Marker({
                    map: minimap,
                    draggable: false,
                    animation: google.maps.Animation.DROP,
                    position: ourLocation
                });
                bigmarker = new google.maps.Marker({
                    map: bigmap,
                    draggable: false,
                    animation: google.maps.Animation.DROP,
                    position: ourLocation
                });
            }
            initialize();
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#myModal1').click(function () {
                $('#myModal').reveal();
                    google.maps.event.trigger(bigmap, 'resize');
                });
            });
        </script>

但是这个脚本:

        <script type="text/javascript">
            $(document).ready(function () {
                $('#myModal1').click(function () {
                $('#myModal').reveal(); /* Problem is here */
                    google.maps.event.trigger(bigmap, 'resize');
                });
            });
        </script>

似乎引起了我的错误。当我在Chrome的开发工具中查看控制台时，我看到这个:

Uncaught TypeError: Object #<Object> has no method 'reveal' map.html:96

，当往下钻时显示另外两个错误:

(anonymous function) map.html:96

handler.proxy zepto.js:933

我不知道为什么它不工作，因为我在上面的主题中复制了修复。我为重访一个"已解决"的问题而感到内疚，但我已经修修补补了几个小时，似乎不能像以前的帖子那样让它工作。

任何澄清将非常感激，提前感谢你!

$('#myModal').foundation('reveal', 'open');