谷歌地图未完全显示

Question

所以我们有一个基于 rails api 构建的 reactjs 应用程序，我们使用的是谷歌地图，使用 reactjs 渲染，但是由于某种原因，如果您访问 https://justbooked-staging.herokuapp.com/listings?q=tacos&location=16%20Aladdin%20Crescent,%20Richmond%20Hill,%20ON,%20Canada&lat=43.8986289&lng=-79.448373 并单击“地图视图”，您会在下方看到一些灰色谷歌地图。

编辑 - 附上图片，example

我们想解决这个问题，但正在努力寻找解决方案。

地图容器是由css设置的，但地图渲染不是……javascript渲染的地图……这是因为改变标签（列表视图和地图视图）就像标签一样。

话虽如此，我认为设置地图容器不会解决问题。我注意到，如果您向上或向下滚动页面，则地图会正确显示整个空间

有什么想法吗？这几天一直在拖我们的后腿！

谢谢！

Answer 1

在切换到选项卡并加载地图后使用google.maps.event.trigger(map, "resize");。

当地图以不可见的<div> 呈现时，问题就出现了，然后变得很时髦。