Google Maps download screen

Question

I noticed that Google Maps takes longer than usual to load these days, and causes the browser to refresh many times before loading. In any case, this made me wonder how I can create a loading screen to display until the map is fully loaded.

Any suggestions?

Update : (In response to Gaby's code)

google.maps.event.addListener(map, 'tilesloaded', function(){ document.getElementById('loading').innerHTML = ''; }) 

Is it possible for a bootable PNG to overlay the entire map and delete it immediately before the event, broken down by label?

Answer 1

Alternatively, you can simply set the bootable gif image as the background div div:

http://jsfiddle.net/c962U/

Answer 2

You can listen to the tilesloaded event:

 google.maps.event.addListener(map, 'tilesloaded', function(){ document.getElementById('loading').innerHTML = ''; }) 

Here is a working jsfiddle: http://jsfiddle.net/96WgM/2/