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; }

1 Answer 1

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/

1
  • 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, 2012 at 19:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.