谷歌地图加载问题

Question

我已使用Google Maps Javascript API v3服务实施了Google地图。当页面加载时，地图仅显示在其div容器的左上角，也就是说，它仅显示在div容器的四分之一中，其余部分为空白。

然而，当我按F12检查代码（使用Firebug）时，突然地图将完全显示。

这里发生了什么？

Answer 1

当您初始化地图和地图容器的位置更改时，通常会发生这种情况。 尝试使用DOM加载地图和所有混乱后调用：

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

Answer 2

你想试试谷歌ajax谷歌加载器。的google.load（ “映射”， “2”）。它对我有用，因为即使我在许多其他地图之间快速切换并在地图上执行许多旅行 - 推销员 - 元启发式操作，装载程序也可以使地图正常工作。

Answer 3

如果hsz的解决方案不起作用，可能是因为需要稍后触发resize事件。这段代码对我有用：

google.maps.event.addListenerOnce(map, 'idle', function () {
    google.maps.event.trigger(map, 'resize');
});

资料来源：https://stackoverflow.com/a/17060345/12484（图片来源：Ian Devlin）