Overlay DIV on Google Maps

0
votes

I am trying to position a div as an overlay on top of a Google Map. I can't seem to keep it contained within the Google Maps div though.

#wrapperMap {
   position: relative;

}

#over {

background: #000000;
position: absolute; 
top: 120px; 
left: 10px; 
z-index: 99;
width: 20%;
height: 380px;
opacity: 0.9;
filter: alpha(opacity=90);
color: #FFFFFF;
}


<div id="wrapperMap">

                <div id="map-canvas2" style="width: 100%; height: 400px; border: 16px solid #e2e1e0;"></div>
                </div>


                <div id="over">

                        <br />

                        <div align="center">
                        <ul class="no_bullet">
                            <li class="school">SCHOOLS</li>
                            <li class="res">RESTAURANTS</li>
                            <li class="rec">RECREATION</li>
                            <li class="shop">SHOPPING</li>
                        </ul>
                        </div>

                </div>

            </div>

You can also see what is currently happening here, under "Current Projects -> Amenities" tab.

2
cssgoogle-maps
on you're website, the #over id is outside #wrapperMap id, double check their order its different from what you posted here - RGLSV
suggest changing absolute to fixed and adding a few pixels to the top/left - Rachel Gallen
@ Crispy-George - I'm not seeing the #over div outside of #wrapperMap on the site code. - user1110562
@Rachel Gallen - I thought position: fixed was always relative to the browser window. How do I get it so it's relative to the #map-canvas2 div? - user1110562
@user1110562 I may be overstretching on this issue, look closer after #map-cavas2, you have a extra </div> so the #over id will be rendered outside: s13.postimg.org/bq6bsdifr/via_source.jpg - RGLSV

2 Answers

2
votes

Ok, if you manage to get both the #over and #map-canvas2 inside a separate wrapper, you can pull it off pretty easy like so:

  • this wrapper that holds both these ids, set it to relative positioned, so that any absolute positioned children, will be bound to this parent;
  • the overlay thingy, #over, set it to position: absolute, and if you want it to stretch to its parent height, then either use 100% height, or use top and bottom props.(dont forget to take into account any borders,margins etc.)
  • and that should do it.

Check out the example here and hopefully this will help you out.

0
votes
.wrapper {
width: 100%;
height: 100%;
position: relative;
}

#over {
background: #000000;
position: absolute;
z-index: 0;
width: 20%;
height: 370px;
opacity: 0.9;
filter: alpha(opacity=90);
color: #FFFFFF;
float: left;
top: 15px;
margin-left: 16px;
}

After some inspecting element. I guess this is the possible solution i see. Try this code above. And put #wrapper on it. Like on the original html code you have before.