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.