CODEWITHSUNDEEP
jquerycssgoogle-maps-api-3windowload
cpcdev
cpcdev

Reputation: 1222

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:

JS:

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

CSS:

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?

Upvotes: 0

Views: 685

Answers (1)

n4m31ess_c0d3r
n4m31ess_c0d3r

Reputation: 3148

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/

Upvotes: 1

Related Questions