user1829478
user1829478

Reputation: 113

Float a div over google maps while maintaining bootstrap responsiveness

I'm trying to over lay a bootstrap container over google maps.

Referring to : How to float a div over Google Maps?

I've managed to overlay a div over google maps using the above method. However, it is doing so by using absolute positioning within a relative-positioned wrapper to achieve that. That means that the overlay is not responsive. Is there a way I can overlay responsive bootstrap classes over google map? Thanks.

Upvotes: 3

Views: 9913

Answers (1)

Martin Malinda
Martin Malinda

Reputation: 1608

The map can be positioned absolutely and the container can be positioned relatively over the map.

<div id="content">
<div id="gmap"></div>
<div class="container overlap"></div>
</div>

#gmap {position:absolute;top:0;left:0;}
.overlap {position:relative}

see here in a pen: http://codepen.io/anon/pen/sojbd

Upvotes: 7

Related Questions