Css 谷歌地图画布在点击时动态调整大小

如果您能为谷歌地图问题提供帮助，我将不胜感激。
我对HTML和CSS只有基本的了解，所以请耐心等待。

我试图让谷歌地图画布在您单击按钮时动态地增减高度。

到目前为止我已经做到了
但是一旦调整了我的地图的尺寸，灰色空间就变成了新的高度
我也找到了我需要的东西
但是代码有点混乱，我无法找到一个能正常工作的版本。

任何帮助都将不胜感激。

---

谢谢。

更新地图尺寸后，需要调用此函数

google.maps.event.trigger(map, 'resize');  

在您提供的第二个链接中，他们在地图画布设置为新维度后调用上述函数：

$('#resizeuno').click(function() {
    $('#map_canvas').css({'width':'300','height':'400'});
    google.maps.event.trigger(map, 'resize');  
});

---

谢谢布里格斯，这太完美了，我现在有两个按钮，可以让我的地图越来越大，越来越小。有没有办法让它重新调整尺寸？对不起@Briggs，我也在代码中添加了这个<代码>$（'#small'）。单击（function（）{$（'#map'）.css（{'width'：'100%，'height'：'500'，'transition'：'1s height'}）；google.maps.event.trigger（map，'resize'）；}）但是我就剩下和我开始时一样的问题了？！？过渡应该是“高度1s”而不是“1s高度”，这使得调整大小是动态的，但它不会在第一次单击时重新加载贴图。我有一个例子。有什么想法吗？非常感谢你的帮助