Question

我有一个使用api的样式化地图，但它没有正确显示：

如果您点击右上角的联系人，地图应显示在联系表单下方：

显示但是地图区域的一半只是灰色。任何想法为什么会这样？

谢谢！

这就是我所看到的：

Answer 1

您正在一个名为initialize()的函数中设置地图，该函数在此行代码加载页面时调用：

google.maps.event.addDomListener(window, 'load', initialize);

但是，您的map-canvas元素的大小尚未正确，因为它有width:100%，并且它是.contact-overlay元素的子元素display:none。

删除该行代码，然后在您单击“联系我们”链接并显示幻灯片打开区域后，显式调用initialize()。一旦显示和调整大小，然后使用initialize()调用初始化地图。

这也有助于您的网页加载更快，因为只有在打开联系人覆盖面板时，它才会在每次加载页面时初始化地图。