show loading image while loading google map

Question

I'm using Google Maps Javascript API for showing a map in my site with aditional markers. This is the trigger

var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

This works fine, but the map takes a few seconds to show. I'm putting a loading image in the map div like this:

<div id="map_canvas" style="width:700px; height:500px"><img src="/image/ajax-loader.gif" /></div>

But the image never shows, just the blank page until the map shows.

The image is working, because if I disable the map loading function, the image is there. So I think the google map clears the div before the map is loaded.

Any ideas how to show a loading feedback to the user while waiting? I could not find a function in the API...

Answer 1

It's easier to add a GIF via CSS to the background of the Map DIV.

i.e.

html

<div id="map_canvas"></div>

css

#map_canvas {background: transparent url(images/ajax-loading.gif) no-repeat center center;}

the loading GIF will stay visible until the map is loaded. Very handy if your using the sensor to get the current location, as this takes a while. As soon as google maps is ready to populate #map_canvas with it's own images, you won't be able to see the loading GIF any more.