Arranging google maps Icons z-index
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
// Display the map, with some controls and set the initial location
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(43.907787,-79.359741),9);
// === Normal marker overlap ===
map.addOverlay(new GMarker(new GLatLng(43.92,-79.7)));
map.addOverlay(new GMarker(new GLatLng(43.94,-79.7)));
map.addOverlay(new GMarker(new GLatLng(43.90,-79.7)));
// === These next three markers all have the same z-index ===
// === so each new one created goes on the top of the older ones ===
function orderOfCreation(marker,b) {
return 1;
}
map.addOverlay(new GMarker(new GLatLng(43.92,-79.5),{zIndexProcess:orderOfCreation}));
map.addOverlay(new GMarker(new GLatLng(43.94,-79.5),{zIndexProcess:orderOfCreation}));
map.addOverlay(new GMarker(new GLatLng(43.90,-79.5),{zIndexProcess:orderOfCreation}));
// === These three markers are stacked in the opposite order to normal ===
function inverseOrder(marker,b) {
return -GOverlay.getZIndex(marker.getPoint().lat());
}
map.addOverlay(new GMarker(new GLatLng(43.92,-79.3),{zIndexProcess:inverseOrder}));
map.addOverlay(new GMarker(new GLatLng(43.94,-79.3),{zIndexProcess:inverseOrder}));
map.addOverlay(new GMarker(new GLatLng(43.90,-79.3),{zIndexProcess:inverseOrder}));
// === These three markers are stacked by importance
// === Markers with the same importance are stacked in the normal manner - south on top
function importanceOrder (marker,b) {
return GOverlay.getZIndex(marker.getPoint().lat()) + marker.importance*1000000;
}
var marker = new GMarker(new GLatLng(43.90,-79.1),{zIndexProcess:importanceOrder});
marker.importance = 2;
map.addOverlay(marker);
var marker = new GMarker(new GLatLng(43.92,-79.1),{zIndexProcess:importanceOrder});
marker.importance = 3;
map.addOverlay(marker);
var marker = new GMarker(new GLatLng(43.94,-79.1),{zIndexProcess:importanceOrder});
marker.importance = 1;
map.addOverlay(marker);
}
// display a warning if the browser was not compatible
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
// This Javascript is based on code provided by the
// Blackpool Community Church Javascript Team
// http://www.commchurch.freeserve.co.uk/
// http://econym.googlepages.com/index.htm
//]]>
</script>