Google Maps - Getting content to overlay the map

Update: I think there's a better way to do this. See this blog entry.

I wanted to add a "Loading..." message to a Google map app I was working (and will hopefully get to share with you soon). But I found that my attempts to get content to appear over the map didn't work. Assume for a second I had like:

 <script type='text/javascript'>
   function displayMessage(m) {
     // use Prototype style access
     $('message').innerHTML = 'Loading...';
     $('message').style.display = 'block';
   }
   function hideMessage(m) {
     $('message').style.display = 'none'; 
   }
   // JavaScript to setup events so that dislayMessage(...) is called when
   // we are loading
 </script>

When I tried to put the element message over the map, it didn't quite work. I tried:

• Putting content in the message element as a child of the main map tag. That is:

    <div id='map'>
     <div id='message'></div>
    </div>
  

• Using the method getContainer on a Google Map object to get a hold of the div tag:

  map.getContainer().appendChild(
      ...code to build up message dynamically...);

What finally did work was nice and simple - absolute positioning of an element, and setting its z-index. So I did:

  <!-- on the page -->
  <div id='map-container'>
   <div id='message'></div>
   <div id='map'></div>
  </div>

  /* in CSS */
  #map-container { position: relative; }
  #map { width: 300px; height: 300px; }
  #message {
    position: absolute;
    top: 0px; left: 0px;
    width: 300px; height: 300px;
    display: none; /* start off hidden */
    z-index: 10; /* make sure message is on top of the map */ 
  }