调整大小时显示灰色区域的谷歌地图[重复]

Question

我有一个带有展开按钮的 Google 地图，单击该按钮可展开地图的大小。问题是，完成后，地图显示灰色区域，就好像它没有被重新绘制一样。

我尝试输入google.maps.event.trigger(map, 'resize');，但这似乎没有任何作用。

我试过了：

<script type="text/javascript">
      jQuery(document).ready(function( $ ) {
          $("#expand").click(function(){
              $("#map").animate({height: '1000'}, 1500 );
              google.maps.event.trigger(map, 'resize');
          });
          });
</script>

如果您点击地图上方的展开链接，地图会展开但有灰色区域，如果您再次点击展开按钮，则会绘制灰色区域。如何在动画上触发它？

我在 Stack 上搜索并搜索了这个问题的答案，并尝试了所有建议但仍然没有运气。我认为人们只是接受了答案或没有完全填写最终解决方案。

Answer 1

在complete-callback 或animate 的progress-callback 中触发resize。

---

oncomplete（动画完成时）：

$('#map').animate({height: '1000'}, 1500 ,
                  function(){google.maps.event.trigger(map, 'resize');});

onprogress（动画的每一步）：

$('#map').animate({height: '1000'},
                         {progress:function()
                                   {google.maps.event.trigger(map, 'resize');},
                          duration:1500} );