1

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; }
Community
  • 1
  • 1
Bob
  • 1,355
  • 5
  • 19
  • 38

1 Answers1

3

Remove this line from your CSS:

#wrapper { position: relative; }

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/

Tom
  • 736
  • 3
  • 15
  • It worked. For some reason also my .css file wasn't being properly uploaded to the FTP. I changed the name of the .css and now it works. Thanks. – Bob May 16 '12 at 19:18