如何使用google.maps.event.trigger（地图，'resize'） [英] How to use google.maps.event.trigger(map, 'resize')

问题描述

我是JS新手，已经找到了前一个问题的答案，这个问题提出了一个新问题，这又让我再次来到这里。

I am new to JS, and have found the answer to a previous question, which brought up a new question, which brought me here again.

我有一个显示包含Google Map API的模式。点击按钮时，弹出显示模式，并显示Google地图。我的问题是只有三分之一的地图正在显示。这是因为需要实施调整大小触发器。我的问题是我如何实现google.maps.event.trigger（map，'resize'）？我在哪里放置这段小小的代码？

I have a Reveal Modal that contains a Google Map API. When a button is clicked, the Reveal Modal pops up, and displays the Google Map. My problem is that only a third of the map is displaying. This is because a resize trigger needs to be implemented. My question is how do I implement the google.maps.event.trigger(map, 'resize')? Where do I place this little snippet of code?

这是我的测试网站。点击Google Map按钮查看手头的问题。
http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html ＃

Here is my test site. Click on the Google Map button to see the problem at hand. http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

显示模型脚本：

The Reveal Model script:

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

我的Google地图脚本：

My Google Map 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：

The div which holds the Google Map:

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

推荐答案

实际上您的源代码有两个问题。

There were actually a couple of problems with your source code.

• 创建 initialize（）函数，但永远不会调用


• 在jQuery加载后调用 $（document）.ready


• map 应该是一个全局变量（就像@Cristiano Fontes所说的）而不是一个 var map


• （重要）点击事件永远不会被调用。您正试图结合两种方法 Zurb的显示提供了打开对话框（一个与JS，只有一个HTML）。您需要使用唯一的JS方法。


• 您使用错误的ID（＃myModal1 永远不会位于HTML中） 。

• The initialize() function is created, but never called
• The $(document).ready should be called after jQuery us loaded
• The map should be a global variable (like @Cristiano Fontes said) and not a var map
• (Important) The click event is never called. You're trying to combine the two methods Reveal from Zurb provides to open a dialog (one with JS, one with only HTML). You need to use the only JS method.
• You're using the wrong ID (#myModal1 is never located in the HTML).

现在：下载解决方案（下次请提供下载/ JSFiddle，所以我们不需要自己创建它）。

And now: Download the solution (Please provide us with a download/JSFiddle next time, so we don't need to create this ourselves).

希望它有帮助！

这篇关于如何使用google.maps.event.trigger（地图，'resize'）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！