How to float a div over Google Maps?

Question

I have a div that displays a Google map.

How do I make another div float over the map div?

possible duplicate of [div on top of div with Google Maps API](http://stackoverflow.com/questions/2786967/div-on-top-of-div-with-google-maps-api) — Pekka, May 17 '11 at 22:06

score 149 · Accepted Answer · answered May 17 '11 at 22:13

149

Try this:

<style>
   #wrapper { position: relative; }
   #over_map { position: absolute; top: 10px; left: 10px; z-index: 99; }
</style>

<div id="wrapper">
   <div id="google_map">

   </div>

   <div id="over_map">

   </div>
</div>

answered May 17 '11 at 22:13

Dan

3,338
5
36
58

3

is that cross-browser ? IE6 ? 7 ? – Obmerk Kronen Mar 11 '12 at 07:39
Nope, that doesn't work I need my events to bubble up to Google Maps. – Paul van Dinther Jun 04 '16 at 02:50
3

this has nothing to do with event bubbling, it is just basic css. And yeah, it is cross-browser, position absolute and relative is ancient. – Félix Adriyel Gagnon-Grenier Sep 13 '16 at 17:50
What in case if we use bootstrap column grid system and when we want content to be in front of the map? For example, https://jsfiddle.net/y30am49b/1/ ... whether is proper way to add position absolute to container-fluid or col-xs-4 in this case? – Mile Mijatović Dec 16 '16 at 12:23
But that doesn't work when you go full screen. Is there any workaround for that? – Arslan Tariq Apr 29 '19 at 10:06

score 15 · Answer 2 · answered Apr 03 '16 at 09:33

15

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

Just need to move the map below this box. Work to me.

From Google

answered Apr 03 '16 at 09:33

Matheus

151
1
2

This was the only one in the list that worked for me. Thanks dude – booky99 Apr 14 '16 at 22:55

score 4 · Answer 3 · answered May 17 '11 at 22:12

4

Just set the position of the div and you may have to set the z-index.

ex.

div#map-div {
    position: absolute;
    left: 10px;
    top: 10px;
}
div#cover-div {
    position:absolute;
    left:10px;
    top: 10px;
    z-index:3;
}

answered May 17 '11 at 22:12

Adrian Rodriguez

3,232
2
24
34

score -12 · Answer 4 · answered Feb 16 '12 at 17:07

-12

absolute positioning is evil... this solution doesn't take into account window size. If you resize the browser window, your div will be out of place!

answered Feb 16 '12 at 17:07

atnmachine

37
2

15

You are talking about fixed positioning, not absolute. – P Varga Mar 22 '12 at 14:49
3

Not if you use it correctly, you need to make sure your absolute positioned element is inside a relative positioned element, otherwise your absolutely positioned elements is positioned in relation to the viewport size. – abrosis Mar 05 '15 at 14:17

How to float a div over Google Maps?

4 Answers4

Linked