How To Overlay A Div On A Map

I am currently undergoing a mini web development project of mine and I have ran into a speed bump. At the moment I am using the Google maps API to create a full screen map backgrou

Solution 1:

Did you tried to size the z-index property of your div to a very high value ?

Solution 2:

try manipulating your z-indexes of map and div...or better try jquery ui dialog plugin

Solution 3:

z-index would do it, but you could take advantage of the builtin functionality designed for exactly this, instead of reinventing the wheel. Take a look at Map Controls.

To achieve what you want ("Im just after an overlaid div with a solid background and a height of 80% and width of 100%") :

css :

#overlay {
      background-color: white;
      height: 80%;
      width: 100%;   
    }

markup :

<divid="overlay"><h2>I am an overlay-div</h2></div>

add the overlay to the map

map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(
   document.getElementById('overlay')
);

see fiddle -> http://jsfiddle.net/M6a7q/