1

I am trying to get a div, which is a child of #map-canvas, in front of the map.

At first, I changed the name of the parent to #maps-canvas, so the map wouldn't appear anymore.

I changed different CSS parameters and it worked perfectly. Then I changed the div back to #map-canvas (I also changed the id in my CSS file), so the map would appear again. Interestingly, the child div disappeared. Then I added a z-index (child: 100, parent: 1), but still no change.

Here's the code:

HTML <div id="map-canvas"> <div id="TEXT13"></div> </div>

CSS #map-canvas width:100%; height:93%; top:7%; z-index:1;

CSS #TEXT13 

top: 70%;
left:40%;
height: 30%;
width: 20%;
background-color: blue;
border: 1px solid black;
position:relative;
z-index: 900;

Am I doing something wrong or is the Google-code preventing the div to be in front of the map?

Timon
  • 75
  • 1
  • 1
  • 13

2 Answers2

0

I would suggest that instead of putting the element inside #map-canvas as a child, you put it before #map-canvas as an absolute positioned element. Then set the z-index above the #map-canvas. This will allow it to act as an overlay on top of the map.

Css example:

#something_you_want_on_top_of_map {
    width: 300px; /* set to same size as map */
    height: 300px;
    position: absolute;
    z-index: 100;
}

Html example:

<div id="something_you_want_on_top_of_map">content...</div>
<div id="map-canvas"></div>

Hope that helps!

Andy Mudrak
  • 787
  • 3
  • 7
  • Thanks for the answer. I did that before, but then decided to put the div inside the #map-canvas. – Timon Jun 28 '13 at 23:14
0

"You cannot place elements inside a canvas (and have both displayed); they are only displayed if the browser does not understand the canvas element."

Placing a <div> within a <canvas>

You'd have to implement something like Andys answer to get the same effect. (Absolute positioning)

Community
  • 1
  • 1
jonosma
  • 339
  • 1
  • 4