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

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.