I have an ImageMap overlay like the following:

var options = {
    getTileUrl: function(coord, zoom) {
        return myUrl+"?x=" + coord.x + "&y=" + coord.y + "&z=" + zoom;
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true
};

var overlay = new google.maps.ImageMapType(options);
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.overlayMapTypes.insertAt(0, overlay);

Because the images can take a while to load, i want to show load indicators for the map (those mon animated gifs for AJAX calls). I am not sure if the usability would be better if there is only one indicator for the whole map, or one indicator for each overlay tile. So, solutions and thoughts for both are wele.

I have an ImageMap overlay like the following:

var options = {
    getTileUrl: function(coord, zoom) {
        return myUrl+"?x=" + coord.x + "&y=" + coord.y + "&z=" + zoom;
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true
};

var overlay = new google.maps.ImageMapType(options);
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.overlayMapTypes.insertAt(0, overlay);

Because the images can take a while to load, i want to show load indicators for the map (those mon animated gifs for AJAX calls). I am not sure if the usability would be better if there is only one indicator for the whole map, or one indicator for each overlay tile. So, solutions and thoughts for both are wele.

• javascript
• ajax
• google-maps-api-3
• overlay
• activity-indicator

1 Answer 1

Use CSS to hide the div that holds your map. Use addEventListenerOnce() on your map to listen for the idle event or perhaps the bounds_changed event. (You may need to experiment to see which event gives you the better result.) When the event fires, make the div that holds your map visible.

There are at least two reasonable ways to show the progress indicator while waiting for the event to fire. You can have it in a separate div that (in addition to revealing the map div) you hide when the event fires. Or you can wrap the map div inside another div and set the background image for that div to be your animated progress indicator image.

In the end, your code might resemble this block I had to write not too long ago:

document.getElementById("map_canvas").style.visibility = "hidden";
var mapType = new google.maps.ImageMapType({
                tileSize: new google.maps.Size(256,256),
                getTileUrl: function(coord,zoom) {
                    return 'img/tiles/'+zoom+'/'+coord.x+'/'+coord.y+'.png';
                }
            });
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.overlayMapTypes.insertAt(0, mapType);
google.maps.addListenerOnce(map, 'idle', function() { document.getElementById("map_canvas").style.visibility = "visible";});