Javascript 如何使用google.maps.event.trigger（映射，调整大小）

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

我有一个包含谷歌地图API的显示模式。单击按钮时，将弹出“显示”模式，并显示谷歌地图。我的问题是只有三分之一的地图在显示。这是因为需要实现调整大小触发器。我的问题是如何实现google.maps.event.trigger（映射，'resize'）？我应该把这段代码放在哪里

这是我的测试站点。点击谷歌地图按钮查看手头的问题。

显示模型脚本：

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

$（文档）.ready（函数（）{
$（'#myModal1'）。单击（函数（）{
$（'#myModal'）.reveal（）；
});
});

我的谷歌地图脚本：

<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.maps.LatLng（39.739318，-89.266507），
缩放：5，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），
地图选项）；
}

持有谷歌地图的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>

怎么到这里

google.maps.event.trigger（映射，“调整大小”）从3.32版开始没有任何效果，只需将其添加到此处即可

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


$（文档）.ready（函数（）{
$（'#myModal1'）。单击（函数（）{
$（'#myModal'）.reveal（）；
google.maps.event.trigger（映射，'resize'）；
});
});

但是您需要将map作为一个全局变量，所以在这里丢失var

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

 </script>


函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（39.739318，-89.266507），
缩放：5，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
-->map=new google.maps.map（document.getElementById（“map_canvas”），
地图选项）；
}
您的源代码实际上有几个问题


已创建
initialize（）
函数，但从未调用该函数
加载jQuery us后应调用
$（document）.ready
map
应该是一个全局变量（如@Cristiano Fontes所说），而不是
var map
（重要）从不调用
单击
事件。您正在尝试结合提供的两种方法来打开一个对话框（一种使用JS，另一种仅使用HTML）。您需要使用唯一的JS方法

您使用了错误的ID（
#myModal1
在HTML中从未找到）

现在：（下次请为我们提供下载/JSFiddle，所以我们不需要自己创建）

希望有帮助
 没有找到如何为最后一个答案留下评论，但是为克里斯蒂亚诺·丰特斯提供+1帮助！成功了。就我而言：

<script type="text/javascript">    

$('div.map-box').hide();
$('li.map').mouseover(function(){
    $('div.map-box').show();
    google.maps.event.trigger(map, 'resize');
});

</script>


$（'div.map-box'）.hide（）；
$（'li.map'）.mouseover（函数（）{
$（'div.map-box'）.show（）；
google.maps.event.trigger（映射，'resize'）；
});
像现在一样，google.maps.event.trigger（map，'resize'）什么也不做。就像我们有一个包含谷歌地图的mat对话框，也有同样的问题。我找到了一些你可以处理的方法：

具有超时的初始化映射
在映射初始化之后更改父容器的大小，然后将其更改回原来的大小
但对我来说，所有这些方法都很糟糕，我正在寻找更好的方法。
谢谢你的回复，尽管我无法让它发挥作用。正如你所说，我改变了密码。我还只是拿到地图的三分之一，还没弄明白。grrrri查看Jquery有错误，查看
uncaughtreferenceerror:$未定义
，还有一个
缺少
之后（映射，'resize'）
是的，对于应该剪切和粘贴的东西，我确实把它搞得一团糟。你的整个回答都是对的，我只是不知道如何正确地更改和更正。多亏了像你这样乐于助人的人，像我这样的JS noobs才得以学习和实践。Stackoverflow.com是一个前额保护程序！非常感谢您的时间和努力@Crisiano Fontes！这是我以前没见过的奇怪东西。我打开了你的网站，正如你说的，地图没有完全显示出来。但是，如果我用F12或mozilla中的firebug打开chrome控制台，你的地图会立即完全显示出来，直到我再次刷新页面，我才得到完整的地图。我没有你的问题的解决方案，但发现这很有趣+1.谢谢你的+1。我试过添加一个js事件，但没有任何效果。必须有人知道发生了什么。非常感谢您的时间和非常详细的工作示例@Marok。你击中了我的头，我的问题现在解决了。下次我在这里时，我会记得提供一个JSFIDLE。再次感谢！！嗯，解决方案现在不存在了。。。如果在JSFIDLE上也有这样的功能，那就太好了…@Marck您提供的“下载解决方案”链接已断开，无法工作。它会显示一条错误消息，如“错误（404），我们找不到您要查找的页面。”请更新链接或从此stackoverflow帖子中删除此链接。谢谢，你有没有想过？我也遇到了同样的问题，我发现的只是google.maps.event.trigger（map，'resize'）；到处都是东西我们还在考虑如何正确地做。这是我们的最后一个错误，所以当我们找到更好的方法时，我将在这里回答。触发resize的另一个方法现在也在起作用，所以我们做了一些类似的事情：parentElement.resize（99%）；parentElement.resize（100%）；这是唯一有效的方法
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
                google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
                    google.maps.event.trigger(map, 'resize');
                });
});