Skip to content

Instantly share code, notes, and snippets.

@mgalgs

mgalgs/zIndexTest.html

Created January 22, 2011 18:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mgalgs/791344 to your computer and use it in GitHub Desktop.
Save mgalgs/791344 to your computer and use it in GitHub Desktop.
Download ZIP
The zIndex option for the circle object in the Google Maps API doesn't seem to be working correctly... This is a minimal example showing the behavior.
Raw
zIndexTest.html
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var cntr = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 14,
center: cntr,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
red_circle = new google.maps.Circle({ // should be on top
radius: 500,
center: cntr,
fillColor: '#FF0000',
fillOpacity: 1,
strokeOpacity: 0,
zIndex: 6
});
blue_circle = new google.maps.Circle({ // should be on the bottom
radius: 500,
center: new google.maps.LatLng(cntr.lat(), cntr.lng()+.007),
fillColor: '#0000FF',
fillOpacity: 1,
strokeOpacity: 0,
zIndex: 4
});
green_circle = new google.maps.Circle({ // should be in the middle
radius: 500,
center: new google.maps.LatLng(cntr.lat()+.007, cntr.lng()+.0035),
fillColor: '#00FF00',
fillOpacity: 1,
strokeOpacity: 0,
zIndex: 5
});
red_circle.setMap(map); // should be on top -> appears on the bottom
blue_circle.setMap(map); // should be on the bottom -> appears in the middle
green_circle.setMap(map); // should be in the middle -> appears on top
}
</script>
</head>
<body onload="initialize()">
<div style="height:100%;" id="map_canvas"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment