CODEWITHSUNDEEP
phpjavascriptgoogle-mapsgoogle-maps-api-3
Nyxynyx
Nyxynyx

Reputation: 63619

Loading screen for Google Maps

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?

Upvotes: 4

Views: 3055

Answers (2)

Mike
Mike

Reputation: 21659

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

http://jsfiddle.net/c962U/

Upvotes: 4

Gabi Purcaru
Gabi Purcaru

Reputation: 31524

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/

Upvotes: 6

Related Questions