show loading image while loading google map

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...

---

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.

---

You might try to wrap the map div inside another div, and set the containing div's background to have some sort of animation graphic. Generally I've found that it's not a good idea to manipulate or place anything inside the element that Google Maps uses as the map.