cpcdev cpcdev - 1 month ago 4x
CSS Question

Load Google Maps AFTER everything else has loaded

I am using some cloud fonts on my website with the Google Maps JavaScript API.

To avoid showing the font "transforming" into the cloud font I have set, I've put in some basic code to hide the body tag initially and then load it after everything has finished loading:


$(window).on('load', function() {


body {
display: none;

The code works fine on its own but the problem is getting the Google Map to load properly with it. As you can see in this fiddle the map does not load properly. The map code works just fine on it's own.

How can I use the window on load function in conjunction with Google Maps to make both work properly?


Apparently google maps doesn't load if the target (#map) is hidden.

You can have a workaround by triggering the resize event of the maps once the target is visible, but do remember to move the center back to your desired location (lat/long).

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

Updated fiddle: https://jsfiddle.net/Lfq1negw/1/