Currently working on a website and attempting to add shadows over Google Maps by using a <div> element for a shadow effect:
Unfortunately, the desired effect is not being achieved.
This is the current CSS code in use:
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#map_canvas {
height: auto;
z-index: 1;
}
#topBar {
background-image:url(img/top.jpg);
background-repeat:repeat-x;
height: 100px;
min-height:100px;
-moz-box-shadow: 0px 5px 5px #888;
-webkit-box-shadow: 0px 5px 5px #888;
box-shadow: 0px 5px 5px #888;
z-index:900;
}
Using an image to create the shadow effect as seen above. However, there is an issue with the map not loading properly. When setting a fixed height instead of "auto", the map loads but then fails to display the intended shadow effect. The problem arises from the map appearing ON TOP of the div with the shadow.
Attempted a solution found here, but it did not resolve the issue.
Thank you in advance for any assistance!