I've noticed that Google Maps is taking longer than usual to load these days, and causes the browser to refresh many times before loading. Either way, this has led me to wonder how I can create a loading screen to display before the map fully loads.

Any suggestions?

Update: (In response to Gabi's code)

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

Is it possible to have a loading PNG overlay the entire map and remove it just before the tilesloaded event?

I've noticed that Google Maps is taking longer than usual to load these days, and causes the browser to refresh many times before loading. Either way, this has led me to wonder how I can create a loading screen to display before the map fully loads.

Any suggestions?

Update: (In response to Gabi's code)

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

Is it possible to have a loading PNG overlay the entire map and remove it just before the tilesloaded event?

• php
• javascript
• google-maps
• google-maps-api-3

2 Answers 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/96WgM/2/

Alternatively, you could just set a loading gif image as the map div background:

http://jsfiddle/c962U/