Google Maps v2 div inside or over map
I just need put one div (or more) inside or over map, something like a menu inside 开发者_JS百科the map area,
I need when i load my map this div is there...
css can't do it right?
that div contains php code...
Yes, that can easily be done with CSS positioning. Consider the following short example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps v2 API: Floating Div</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div style="position: relative;">
<div id="map_canvas" style="width: 400px; height: 300px;"></div>
<div style="position: absolute; top: 0px;
width: 100px; height: 100px; background-color: grey;">
Menu Here
</div>
</div>
<script type="text/javascript">
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(38.00, -100.00), 3);
</script>
</body>
</html>
Screenshot:
This worked for me on Google Maps API3.
Where my menu drop-down elements now overlays Google Maps API3 in the correct order.
This is the important css code:
.menudropdown {
position: fixed;
z-index:2;
}
#map {
position: absolute;
z-index:1;
}
精彩评论