Google Maps API v3 + Foundation 4 Reveal modal 显示不正确

Question

在我们开始之前，我只想澄清一下，我已经从头到尾阅读了以下 SO 文章，尝试复制解决方案，但到目前为止还不能。

Google Map API in Foundation reveal modal not displaying properly

Google Map API inside a Reveal Modal not showing fully

How to use google.maps.event.trigger(map, 'resize')

这里还有 Zurb 的基金会问题列表 -> https://github.com/zurb/foundation/issues

我的问题似乎是相同的，我什至在http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html 上查看了他的源代码，看起来他已经修复了，但我无法修复我的问题。

不确定是不是 Foundation 3 和 4 中的差异导致了我的问题（因为这些 SO 帖子已经有将近一年的历史了），但无论如何，resize 方法似乎不起作用。

这是我在 db 上的基本页面的链接 -> http://db.tt/gdl3wVox

您可以看到小地图可以正常工作，但是当您单击“查看大地图”的链接时，会出现两个问题。

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

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

我不确定为什么它不起作用，因为我复制了上述主题中的修复程序。我为重新审视一个“已解决”的问题而感到内疚，但我已经修改了几个小时，似乎无法像以前的帖子那样让它工作。

任何澄清将不胜感激，在此先感谢您！

Answer 1

你应该使用

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

显示模态。

另外，google.maps.event.trigger(bigmap, 'resize'); 应该绑定到#myModal 的打开事件：

$('#myModal').on('opened', function () { google.maps.event.trigger(bigmap, 'resize'); });

并检查 bigmap，它超出了变量范围。