I have a small form with a control that I want to position over my Google Map, right at the top-leftmost corner.
I’ve found a couple of responses to this problem:
How to float a div over a google maps
Div on top of div with google maps api
But, none of those worked for me. I either see a map without the form control or just the form controls but no map. What could be the problem?
My latest HTML and CSS:
HTML:
<html>
<body>
<div id="wrapper">
<div id="map_canvas"></div>
<div id="over_map">
<p>Select something!</p>
<select>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
</select>
</div>
</div>
</body>
</html>
CSS:
html { height: 100%; width: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { position: absolute; top: 10px; left: 10px; height: 100%; width: 100%; }
#wrapper { position: relative; }
#over_map { position: absolute; top: 10px; left: 10px; z-index: 99; }
Remove this line from your CSS:
The map pan & zoom controls are in the upper left so be careful with placement or disable those controls.
Working example on jsfiddle: http://jsfiddle.net/pratie/2sJSg/