Getting own content on top of Google Maps
I just stumbled over a great solution to a problem I had; getting own content to float above a Google Maps IFRAME. I thought I had tried every possible way, using a variety of tricks. However, the solution would reveal itself to be much easier than I would have thought!
Ben Simon writes on his blog on how he solved the issue nice and tidy by simply using a parent container for two child DIVs; the overlay and the map. Like this:
<div id="container">
<div id="layer">This will be on top of the map</div>
</div>
<div id="layer">This will be on top of the map</div>
</div>
Using the following CSS markup:
#container {
position: relative;
}
position: relative;
}
#layer {
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 0px;
z-index: 10px;
}
Very nice, Ben!
