Google Maps API loading after page display

Question

My landing page contains most of Google Maps, which slows down loading time. I am trying to do the following:

• First load the static elements so that the page loads quickly.
• Display a loading notification in the map placeholder so that the user knows that the map is approaching.
• Download and map display

I have done this:

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

The function map_initialize()loads the map into its div container. However, this still does not display static elements with a fist. The page will wait for completion map_initialize(), then load static elements simultaneously with the map.

Answer 1

window.onload , :

. , DOM, .

: Mozilla Dev: window.onload

:

• JavaScript,

, , window.onload :

window.onload = map_initialize;

Answer 2

:

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

[edit] jQuery: http://api.jquery.com/load-event/#comment-43474051

Answer 3

If you use the onLoad event, static elements should load before your map. The method readyin jQuery will be run before everything is loaded; it starts as soon as documentready.