If you have one image as a groundoverlay method, I would do the following:
- Create img tag via javascript
- Set src to overlays / layer1.png
- display waiting window
- Add the onload event to it, on which load it as a gmaps overlay and close the wait window.
Progress ... it's a bit more for the browser. But downloading is easy, therefore:
function loadOverlay(){ var img = new Image(); var img_url = "overlays/layer1.png" img.src= img_url; $('#wait_for_overlay').show(); img.onLoad = function(){ $('#wait_for_overlay').hide(); var layer1 = new google.maps.GroundOverlay(img_url,imageBounds); layer1.setOpacity(.5); layer1.setMap(map); } };
The reason this will work:
Creating an img object and setting its 'src' attribute will cause the browser to start loading the requested file as soon as the javascript function does this.
The browser will put this image in its local cache, and then call the onLoad function to see what should happen to it.
The callback actually does nothing for the img variable (perhaps it should make sure that it will not be destroyed in accordance with the closing rules, make a NOP with it if this is an error), but instead it calls the google-maps function.
The google-maps function will request an image at the same URL in which the browser will look for its cache table and immediately return the image from the cache.
This trick is nasty, but in fact, the Google Maps engine will do the same thing onLoad thingy in the background (since this works with the map).
Hope this satisfies your question ... there is no progress bar, just a progress bar ... Perhaps you could make a progress bar by querying it with XHR and check the progress, I'm not sure, but the trick will be the same: make a faux request, so that he gets into the cache.