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

• 该initialize()函数已创建，但从未调用
• 该$(document).ready应叫后的jQuery我们装
• 本map应是一个全局变量（如@Cristiano丰特斯说），而不是一var map
• （重要）click永远不会调用该事件。您正在尝试组合来自 Zurb 的 Reveal提供的两种方法来打开对话框（一种使用 JS，一种仅使用 HTML）。您需要使用唯一的JS方法。
• 您使用了错误的 ID（#myModal1永远不会位于 HTML 中）。

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

希望有帮助！

只需在此处添加

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

但是你需要把地图作为一个全局变量，所以在这里失去 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.event.addListenerOnce(map, 'tilesloaded', function() {
                google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
                    google.maps.event.trigger(map, 'resize');
                });
});

没有找到如何对最后一个答案发表评论，但 +1 为 Cristiano Fontes 提供帮助！有效。就我而言：

<script type="text/javascript">    

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

</script>

现在， google.maps.event.trigger(map, 'resize') 什么都不做。就像我们有包含谷歌地图的 mat-dialog 一样，也有同样的问题。我找到了一些可以处理它的方法：

1. 初始化映射超时。
2. 在 map inits 之后更改父容器的大小，然后将其更改回来。

但对我来说，所有这些方法都非常糟糕，我正在寻找更好的方法。