在加载其他所有内容后加载 Google 个地图

Question

我在我的网站上使用一些云字体和 Google 地图 JavaScript API。

为了避免将字体 "transforming" 显示到我设置的云字体中，我添加了一些基本代码来最初隐藏 body 标签，然后在所有内容加载完成后加载它：

JS:

$(window).on('load', function() { 
    $("body").fadeIn('fast');
});

CSS:

body {
    display: none;
}

代码本身运行良好，但问题是让 Google 地图正确加载。正如您在此 fiddle 中所见，地图未正确加载。地图代码本身就可以正常工作。

如何将 window 加载功能与 Google 地图结合使用，使两者都能正常工作？

Answer 1

如果目标 (#map) 被隐藏，显然 google 地图不会加载。

您可以通过在目标可见后触发地图的调整大小事件来解决此问题，但请记住将中心移回您想要的位置 (lat/long)。

google.maps.event.trigger(map, 'resize');
map.setCenter({lat: -34.397, lng: 150.644}); // from OP's fiddle

Load Google Maps AFTER everything else has loaded