How to Float a Div Over Google Maps

How to float a div over Google Maps?

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>

How to float a div over Google Maps and keep it in fullscreen?

I finally could solve it.
What I had to do was put the div that I want to be superimposed on the first div that is generated when the Google map is initialized.

My html code is the same, the only thing I did was move it with jquery after all the elements of the website are loaded.

My html code super explained and verified:
(Imagine that the following code is inside the basic structure of an html page)

<div class="gx-card-body">
                                    <!-- <div class="cont-fab">
                                        <a href="javascript:void(0)" class="gx-fab-btn gx-btn-primary">
                                            <i class="zmdi zmdi-account-add zmdi-hc-fw zmdi-hc-lg"></i>
                                        </a>
                                    </div> -->
                                    <div class="cont-items-monitor overlay" style="display: none">
                                        <ul>
                                            <li>Seat León JMG-8823</li>
                                            <li>Seat Ibiza JMG-8823</li>
                                            <li>VW Vento JMG-8823</li>
                                            <li>Nissan Versa JMG-8823</li>
                                            <li>Nissan March JMG-8823</li>
                                            <li>Lincoln Navigator JMG-8823</li>
                                            <li>Seat León JMG-8823</li>
                                            <li>Seat Ibiza JMG-8823</li>
                                            <li>VW Vento JMG-8823</li>
                                            <li>Nissan Versa JMG-8823</li>
                                            <li>Nissan March JMG-8823</li>
                                            <li>Lincoln Navigator JMG-8823</li>
                                            <li>Seat León JMG-8823</li>
                                            <li>Seat Ibiza JMG-8823</li>
                                            <li>VW Vento JMG-8823</li>
                                            <li>Nissan Versa JMG-8823</li>
                                            <li>Nissan March JMG-8823</li>
                                            <li>Lincoln Navigator JMG-8823</li>
                                            <li>Seat León JMG-8823</li>
                                            <li>Seat Ibiza JMG-8823</li>
                                            <li>VW Vento JMG-8823</li>
                                            <li>Nissan Versa JMG-8823</li>
                                            <li>Nissan March JMG-8823</li>
                                            <li>Lincoln Navigator JMG-8823</li>
                                            <li>Seat León JMG-8823</li>
                                            <li>Seat Ibiza JMG-8823</li>
                                            <li>VW Vento JMG-8823</li>
                                            <li>Nissan Versa JMG-8823</li>
                                            <li>Nissan March JMG-8823</li>
                                            <li>Lincoln Navigator JMG-8823</li>
                                        </ul>
                                    </div>

                                    <div id="google-map"></div>
                                </div>

My JS code (jQuery):

$(document).ready(function () {
    $('.cont-items-monitor').appendTo($('#google-map').find('div')[0]);
});

I hope it serves someone else

Float a div over Google Maps

I think it will be fixed if you just add a position to the elements. Z-index needs a position to work..

So put "position:relative;" on both elements and you will be fine.

Div over Google map

The problem is that google maps need a concrete height attribute in order to work.

Here's an example: http://jsfiddle.net/9qDhX/

Note that height: 400px; will work, but height: 100%; will leave you with a blank screen.

There are various workarounds to get a "full screen" map. The best, cross-browser ones will use some kind of jQuery to set the height of the map_canvas based on the current window size, with a listener to window resize to reset the height.

Float a div over google maps while maintaining bootstrap responsiveness

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

div on top of div with Google Maps API

Can't you changed the positions of the DIVs like this:

<div id="menu"></div>
<div id="map"></div>

If not you could go something like this:

<div id="map"></div>
<div id="menu"></div>

#menu
{
    position: absolute;
    top: 10px;  /* adjust value accordingly */
    left: 10px;  /* adjust value accordingly */
}

Update 2

Cross-browser transparency style:

.dropSheet
{
    background-color: #000000;
    background-image: none;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

Just apply the class dropSheet to the element you want to make transparent.

Float a Div over Google Maps at specific lat / lng

You can use an Overlay View.
https://developers.google.com/maps/documentation/javascript/reference#OverlayView

See the Google example here:
https://google-developers.appspot.com/maps/documentation/javascript/examples/overlay-simple

Overlay DIV on Google Maps

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.

How to have a div overlap google maps without using relative/absolute positioning?

Firstly, You need to understand how the position and z-index properties work correctly please check the following links:

https://www.w3schools.com/cssref/pr_class_position.asp
https://www.w3schools.com/cssref/pr_pos_z-index.asp

Now for an answer to your question. If you have read and understood the position property and the z-index property correctly. You will see that by default the property if not specifically set of an element is set to position:static on which z-index does not apply. For z-index to work your position property needs to be specifically set to relative/fixed/absolute.

For your solution you need to do the following in your css.

Add position:relative to your #div2 class with the z-index as it is.
Next though you will see that point 1 fix will get you the desired result but still the #div3 does not have position specifically set to apply it's z-index just in case. So please add that and also try setting low but positive value of the z-index say z-index:999;. We dont want the div to go back down the bottom for any other control to show up above it or hide it if need be.

Hope this helps.