CODEWITHSUNDEEP
htmlcssgoogle-maps-api-3
Greg
Greg

Reputation: 3063

How to place a DIV within a google map DIV?

As you can see on this link, at the bottom of the page there is div containing a google map. I'd like to place a red DIV (.blocktest) within the google map area. The issue is that the red DIV is not visible despite the fact that it has a z-index higher than the map (it's probably behind the map). What is the issue? Thanks

link

HTML:

<div id="fullcontainer"></div>
<div id="map"><div id="map-canvas"><div class="blocktest">div that should be above the map</div></div></div>

STYLE:

#fullcontainer {
    margin-bottom:300px;
    position:relative;
    z-index:2000;
    background: #F2F2F2;
}

.blocktest {
   width: 60%;
   background: red;
   z-index: 30;
position: absolute;
    left: 20px;
    bottom: 56px;
}
#map {
    position:fixed;
    z-index:1;
    height:400px;
    bottom:0;
    width:100%;
}

#map, #map-canvas {
    width: 100%;
    height: 400px;
    float: left

}

Upvotes: 3

Views: 2284

Answers (2)

ilter
ilter

Reputation: 4079

As far as I know google rewrites the innerHtml of its container. Your placing a div inside google maps container, won't do you much good, in that case.

If I were you, I would place that .blocktest div outside the google maps container. I would wrap them in a div which would have a style attribute of "position:relative" and give the divs inside that container "position:absolute" attribute so that they could be positioned relatively to the wrapper div. Give the google maps container div a lower z-index value than the .blocktest div, and you're good to go.

Your Code Should Be Like:

<div id="fullcontainer" style="position: relative;">
  <div id="map-canvas" style="position: absolute; z-index: 1;"></div>
  <div class="blocktest" style="position: absolute; z-index: 2;">div that should be above the map</div>
</div>

Ask if you have questions.

Cheers!

Upvotes: 2

Praveen
Praveen

Reputation: 56501

It is possible, by placing the div in absolute positioning.

But in your case, you're placing the blocktest div within map-canvas div, which is overridden by Google maps script. So change like

<div class="blocktest">div that should be above the map</div>
<div id="map-canvas"></div>

Upvotes: 1

Related Questions