CODEWITHSUNDEEP
cssgoogle-maps
AlejandroJS
AlejandroJS

Reputation: 1055

How to place a div over a google map

I need to place a div over a google map, the map has to be responsive, so #map-menu can't be on absolute position

this is the code:

<div id="map-container">
   <div id="map"></div>
   <div id="map-menu">Text</div>
</div>

#map-container {
   width: 100%;
   height: 100%;
   position:relative;
}

thanks in advance!

UPDATE: I added

#map-menu {
  position: fixed;
  float: right;
}

Upvotes: 3

Views: 2981

Answers (2)

ScaisEdge
ScaisEdge

Reputation: 133360

I Use position absolute and z-index 

<div id='map' >
</div>

<div id='search_location' >
......
</div>

and for css

#search_location{   
   position: absolute; 
   top:6px;     
   right: 235px;    
   width:680px; 
   height:30px;
   z-index: 2000; 
               ....
 }

Upvotes: 1

saudblaze
saudblaze

Reputation: 150

html

add class "inner" to divs

jquery

 $(document).ready(function () {
 $('.inner').wrap( "<div id="map-container"></div>");
 });

Upvotes: 0

Related Questions