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

Question

我使用Google Maps JavaScript API在我的网站上使用了一些云字体。

为了避免将字体“转换”为我已设置的云字体，我先添加了一些基本代码来隐藏body标签，然后在所有内容加载后加载它：

JS：

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

CSS：

body {
    display: none;
}

代码本身可以正常运行，但问题是让Google Map正常加载。正如您在此like so中看到的那样，地图无法正确加载。地图代码可以自行完成。

如何将加载功能窗口与Google地图结合使用才能使其正常工作？

Answer 1

如果目标（#map）被隐藏，显然谷歌地图无法加载。

您可以通过在目标可见时触发地图的调整大小事件来获得解决方法，但请记住将中心移回所需位置（纬度/经度）。

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

更新了小提琴：YouTube's API