Thursday, March 06, 2008

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

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

  /* 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 */ 


  1. Thx, great tip. This helped me a lot. Works fine in combination with scriptaculous.

  2. Thanks for this! I was trying to do the same thing and found this very helpful.