javascript - 如何使用 google.maps.event.trigger(map, 'resize' )

Question

初学JS，找到了上一个问题的答案，又引出了一个新问题，又把我带到了这里。

我有一个包含 Google Map API 的 Reveal Modal。单击按钮时，会弹出 Reveal Modal，并显示 Google map 。我的问题是只显示了 map 的三分之一。这是因为需要实现调整大小触发器。我的问题是如何实现 google.maps.event.trigger(map, 'resize')？我该把这段代码放在哪里？

这是我的测试站点。点击谷歌地图按钮查看手头的问题。 http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

显示模型脚本:

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

我的谷歌地图脚本:

<script type="text/javascript">
 function initialize() {
 var mapOptions = {
 center: new google.maps.LatLng(39.739318, -89.266507),
 zoom: 5,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var map = new google.maps.Map(document.getElementById("map_canvas"),
 mapOptions);
 }

 </script>

保存 Google map 的 div:

  <div id="myModal" class="reveal-modal large">
  <h2>How to get here</h2>
  <div id="map_canvas" style="width:600px; height:300px;"></div>
  <a class="close-reveal-modal">&#215;</a>
 </div>

2018-05-22 更新

随着 Maps JavaScript API 3.32 版中新渲染器的发布，调整大小事件不再是 Map 类的一部分。

文档说明

When the map is resized, the map center is fixed

• The full-screen control now preserves center.

• There is no longer any need to trigger the resize event manually.

来源:https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); 从版本 3.32 开始没有任何效果

Answer 1

您的源代码实际上存在一些问题。

• 创建了 initialize() 函数，但从未调用过
• $(document).ready 应该在我们加载 jQuery 之后调用
• map 应该是全局变量(如@Cristiano Fontes 所说)而不是 var map
• (重要)永远不会调用click 事件。您正在尝试结合这两种方法 Reveal from Zurb提供打开一个对话框(一个带有 JS，一个只有 HTML)。您需要使用唯一的 JS 方法。
• 您使用了错误的 ID(#myModal1 从未位于 HTML 中)。

现在:Download the solution (下次请为我们提供下载/JSFiddle，这样我们就不需要自己创建了)。

希望对您有所帮助!