Google Maps默认样式隐藏整个地图

Question

尝试将Google Maps添加到现有Laravel项目的新网页上，事实证明这是一个很大的难题。

https://www.beenleighrum.com.au/findme

该代码在其他多个网站上均可正常运行。

问题在于，默认情况下，元素的位置相对：

style="position: relative;overflow: hidden;"

如果我打开DevTools（F12）并将位置更改为“静态”，则会显示地图。问题是google maps API希望它是相对的，除非我可以更改它，否则我看不到我的地图将如何正确显示？

Answer 1

您需要为地图容器设置宽度和高度。

#map {
  width: 100%;
  height: 100%
}

Answer 2

设置地图的宽度和高度：

#map {
    width: 100vw;
    height: 100vh;
}

表示100％视口宽度和100％视口高度。使用vw和vh，您不必处理#map的容器。