google maps overlay layer

Question

i'm trying to put a layer on top of my google maps to cover it up. There doesn't have to be any interaction with google maps, it's just one layer on top the other.

what i have now:

<div id="map">
   <div id="overlay"></div>
</div>   

in the map div i put my google maps, and the overlay layer has a background as big as the map div, but the google maps keeps putting itself on top.

Anyone an idee what i can do about it?

Answer 1

Google Maps API V3 supports an option called noClear:

If true, do not clear the contents of the Map div.

Use it like:

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  noClear: true,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

However, semantically it feels better to put the div#overlay as the next sibling of the map div as @Marcelo suggests.