7

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...

Kara
  • 6,115
  • 16
  • 50
  • 57
Alex Angelico
  • 3,710
  • 8
  • 31
  • 49

2 Answers2

28

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.

Andrew Killen
  • 1,756
  • 24
  • 24
9

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.

Matt King
  • 2,146
  • 15
  • 8