asked on

How do I create a transparent div over another div that contains google maps?

I am creating a site that uses google maps and I am trying to put a transparent div over the map. The only way I could get it done was this:

<div id="container" class="container"> 
<div id="map_canvas" class="map"></div>
<div id="over_map" class="over_map" ></div>
</div>
However it has a bug. If you open the page in a IE tab, then move the focus to another IE, wait a few seconds, and go back to the initial tab, it looses the transparent efect. I have created a small test file so yo can see it better.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
 
div.container {
	position:relative;
	width: 100%;
	height: 100%;
 
}
 
div.map {
	position:absolute;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	z-index:1;
	background-color: red;
	}
div.over_map {
	position:absolute;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	background-color: black;
	z-index:2;
	filter:alpha(opacity=50);
		-moz-opacity:0.5;
	opacity:0.5;
 
}
</style>
</head>
 
<body style="">
 
<table width="100%" height='100%' border="1" >
	<tr>
		<td width="20%"></td>
		<td width="80%">
			<div class="container">&nbsp;
				<div id="map_canvas" class="map">&nbsp;</div>
				<div id="over_map" class="over_map">&nbsp;</div>
			</div>
		</td>
	</tr>
</table>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

ldeabreu

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial