Show loading image during google map loading

Question

I use the Google Maps Javascript API to display maps on my site with extra markers. This is a trigger.

var map = new google.maps.Map(document.getElementById("map_canvas"), settings); 

This works fine, but it takes a few seconds to display. I put the loading image in a div map as follows:

 <div id="map_canvas" style="width:700px; height:500px"><img src="/image/ajax-loader.gif" /></div> 

But the image is never displayed, just a blank page until the map shows.

The image works because if I turn off the map download function, the image will be there. Therefore, I think the google map clears the div before loading the map.

Any ideas how to show loading feedback to the user while waiting? I could not find the function in the API ...

Answer 1

You can try to wrap a div div in another div and set the containing div to have some kind of animated graphics. As a rule, I have found that it is not recommended to manipulate or place anything inside an element that uses Google Maps as a map.

Answer 2

It’s easier to add GIFs via CSS to the background of the DIV map.

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 remain visible until the map is loaded. It is very convenient if you use the sensor to obtain the current location, as this takes some time. Once Google maps are ready to fill #map with their own images, you will no longer be able to see the downloadable GIF.