在加载完其他所有内容后加载Google

Question

我正在使用一些云字体在我的网站上与谷歌地图JavaScript API。

为了避免将字体“转换”显示为我设置的云字体，我输入了一些基本代码，最初隐藏body标记，然后在完成加载之后加载它：

JS:

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

CSS:

body {
    display: none;
}

代码本身运行良好，但问题是如何正确地加载Google。正如您在这个小提琴中看到的那样，映射没有正确地加载。地图代码本身工作得很好。

如何与Google一起使用window on load函数来使两者正常工作？

Answer 1

显然，如果目标(#map)是隐藏的，谷歌地图就不会加载。

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

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

更新小提琴：https://jsfiddle.net/Lfq1negw/1/