[JavaScript] Loading Google Maps API after the page is displayed

Question

My landing page contains a big google maps portion, which slows down the loading time. I am trying to do the following:

1. Load the static elements first so the page loads fast initially.
2. Display a loading notification in the map placeholder so that the user knows that the map is coming up
3. Load and display the map

I have done this:

$(document).ready(function() {
  map_initialize();
}

The map_initialize() function loads the map into its container div. However, this still will not display the static elements fist. The page will wait until the map_initialize() is finished, then load the static elements at the same time as the map.

Answer 1

Try this:

$('body').load(function() {
  map_initialize();
});

[edit] I just found this from the user comments in the jQuery documentation : http://api.jquery.com/load-event/#comment-43474051

Answer 2

If you use the onLoad event the static elements should load before your map. The ready method in JQuery will run before everything is loaded; it runs as soon as document is ready.

Answer 3

The window.onload event will wait for the images, and any other resource on the document, to load before it gets fired:

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

Source: Mozilla Dev Center: window.onload

You may also want to check out the following Stack Overflow post for further reading:

• Execute JavaScript When Page Has Fully Loaded

Therefore all you need to do is to set the window.onload event handler as follows:

window.onload = map_initialize;