Webmap API Examples

__TOC__
This article provides the complete HTML and Javascript code for all Webmap API examples. You may need to modify the code to work on your system; in particular, see:
* Prerequisites for using the Webmap API.
* Required image files used in some of the examples.
== Removing a marker ==
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div#map-container {
 width: 500px;
 height: 500px;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]"
 type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
var mapInstance, marker;
function loadmap() {
 // creates the map
 mapInstance = new SLMap(document.getElementById('map-container'), {disableVoiceInfo: true});
 mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
 
 // creates the icons
 var yellow_dot_image = new Img("b_map_yellow.gif",9,9);
 var yellow_icon = new Icon(yellow_dot_image);
 var all_images = [yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon];
 
 // creates the marker
 marker = new Marker(all_images, new XYPoint(997,1002));
 mapInstance.addMarker(marker);
}
function removeMarker() {
 // removes the marker
 mapInstance.removeMarker(marker);
}
</script>
</head>
<body onload="loadmap()">
<a href="javascript: removeMarker();">Click to remove the yellow marker from the map</a>
</body>
== Disabling and enabling dragging ==
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div#map-container {
 width: 500px;
 height: 500px;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]"
 type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
var mapInstance;
function loadmap() {
 // creates the map
 mapInstance = new SLMap(document.getElementById('map-container'));
 mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
}
</script>
</head>
<body onload="loadmap()">
<a href="javascript: mapInstance.disableDragging();">Click to Disable Dragging of map</a>
<a href="javascript: mapInstance.enableDragging();">Click to Enable Dragging of map</a>
</body>
== Pan and re-center map ==
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div#map-container {
 width: 500px;
 height: 500px;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]"
 type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
var mapInstance;
function loadmap() {
 // creates the map
 mapInstance = new SLMap(document.getElementById('map-container'));
 mapInstance.centerAndZoomAtSLCoord(new XYPoint(998.5,1001),2);
 
 var mapWindow1 = new MapWindow("This is (997,1002)");
 var mapWindow2 = new MapWindow("This is (1000,1000)");
 var mapWindow3 = new MapWindow("This is (1010.5,1000.5)");
 
 mapInstance.addMapWindow(mapWindow1, new XYPoint(997,1002));
 mapInstance.addMapWindow(mapWindow2, new XYPoint(1000,1000));
 mapInstance.addMapWindow(mapWindow3, new XYPoint(1010.5,1000.5));
}
</script>
</head>
<body onload="loadmap()">
Click the links to pan/re-centre the map on the co-ords:
<a href="javascript: mapInstance.panOrRecenterToSLCoord(new XYPoint(1000,1000), true);">
Pan or Recenter to (1000, 1000)</a>
<a href="javascript: mapInstance.panOrRecenterToSLCoord(new XYPoint(1010.5,1000.5), true);">
Pan or Recenter to (1010.5, 1000.5)</a>
</body>
== Setting a marker's event handlers ==
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div#map-container {
 width: 500px;
 height: 500px;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]"
 type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
function loadmap() {
 // creates the map
 var mapInstance = new SLMap(document.getElementById('map-container'));
 mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
 
 // creates the icons
 var yellow_dot_image = new Img("b_map_yellow.gif",9,9);
 var yellow_icon = new Icon(yellow_dot_image);
 var all_images = [yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon];
 
 // creates a function that we will bind to the marker click action
 var onmouseclickAction = function(marker) {
 alert("an onmouseclick action occured at (" + marker.slCoord.x + "," + marker.slCoord.y + ")");
 };
 
 // creates a function that we will bind to the marker click action
 var onmouseoutAction = function(marker) {
 alert("an onmouseout action occured at (" + marker.slCoord.x + "," + marker.slCoord.y + ")");
 };
 
 var onmouseoverAction = function(marker) {
 alert("an onmouseover occured at (" + marker.slCoord.x + "," + marker.slCoord.y + ")");
 };
 
 // creates the marker and sets its event handlers
 var marker = new Marker(all_images, 
 new XYPoint(997,1002), 
 {clickHandler: onmouseclickAction, 
 onMouseOutHandler: onmouseoutAction, 
 onMouseOverHandler: onmouseoverAction});
 mapInstance.addMarker(marker);
}
</script>
</head>
<body onload="loadmap()">
This map will display alerts when the yellow marker receives any of these events:
Click
Mouseover (enter)
Mouseout (leave)
</body>
== Setting a map's single click handler ==
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div#map-container {
 width: 500px;
 height: 500px;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]"
 type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
function myClickHandler(x, y)
{
 alert("The map was clicked on at (" + x + ", " + y + ")!");
}
function loadmap() {
 // creates the map
 mapInstance = new SLMap(document.getElementById('map-container'), {singleClickHandler: myClickHandler});
 mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
}
</script>
</head>
<body onload="loadmap()">
This map traps the click event and tells you where you clicked on the map
</body>
== Setting a map's double click event handler ==
This is reported to have some (undetermined) issues.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div#map-container {
 width: 500px;
 height: 500px;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]"
 type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
function myClickHandler(x, y)
{
 alert("The map was double-clicked on at (" + x + ", " + y + ")!");
}
function loadmap() {
 // creates the map
 mapInstance = new SLMap(document.getElementById('map-container'), {doubleClickHandler: myClickHandler});
 mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
}
</script>
</head>
<body onload="loadmap()">
This map traps the double-click event and tells you where you clicked on the map
(Issue: Google Maps automatically re-centres the map on a double-click, and this cannot be disabled)
</body>
== Setting a map's state-changed handler ==
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div#map-container {
 width: 500px;
 height: 500px;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]"
 type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
function loadmap() {
 // creates the map
 mapInstance = new SLMap(document.getElementById('map-container'), {onStateChangedHandler: doSomething});
 mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
}
function doSomething() {
 alert("the map state has changed!!");
}
</script>
</head>
<body onload="loadmap()">
This map will display an alert whenever the map's state changes (i.e. the map is panned or zoomed)
</body>
== Triggering a marker click ==
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div#map-container1
{
 width: 500px;
 height: 500px;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]"
 type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
// mapInstance and marker is set as a global, so that the JS handler can access them
var mapInstance, marker;
function loadmap() 
{
 // create the icons for use as a marker
 var yellow_dot_image = new Img("b_map_yellow.gif",9,9);
 var yellow_icon = new Icon(yellow_dot_image);
 var all_images = [yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon];
 
 // Create map
 mapInstance = new SLMap(document.getElementById('map-container1'));
 mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
 
 // creates the marker
 marker = new Marker(all_images, new XYPoint(998.5,1003.5), {centerOnClick: true});
 mapInstance.addMarker(marker);
}
</script>
</head>
<body onload="loadmap()">
<a href="javascript:mapInstance.clickMarker(marker);">Click here to simulate clicking on the marker</a>
(this should cause the map to centre on the marker)
</body>
== Get current map center and map bounds ==
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div#map-container {
 width: 500px;
 height: 500px;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]"
 type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
var mapInstance;
function loadmap() {
 // creates the map
 mapInstance = new SLMap(document.getElementById('map-container'));
 mapInstance.centerAndZoomAtSLCoord(new XYPoint(998.5,1001),2);
 
 var mapWindow1 = new MapWindow("This is (997,1002)");
 var mapWindow2 = new MapWindow("This is (1000,1000)");
 var mapWindow3 = new MapWindow("This is (1020,1020)");
 
 mapInstance.addMapWindow(mapWindow1, new XYPoint(997,1002));
 mapInstance.addMapWindow(mapWindow2, new XYPoint(1000,1000));
 mapInstance.addMapWindow(mapWindow3, new XYPoint(1020,1020)); 
 
 checkBounds();
}
function checkBounds() {
 var bounds = mapInstance.getViewportBounds();
 var center = mapInstance.getMapCenter();
 
 document.getElementById('cent').innerHTML = "(" + center.x + "," + center.y + ")";
 document.getElementById('xMin').innerHTML = bounds.xMin;
 document.getElementById('xMax').innerHTML = bounds.xMax;
 document.getElementById('yMin').innerHTML = bounds.yMin;
 document.getElementById('yMax').innerHTML = bounds.yMax;
}
</script>
</head>
<body onload="loadmap()">
Drag/zoom the map and then <a href="javascript: checkBounds();">click here</a>
 to check the current viewport bounds and center coordinate
Center: 
X-Min: 
X-Max: 
Y-Min: 
Y-Max: 
</body>
== Using PNG images and shadows with markers ==
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div#map-container {
 width: 500px;
 height: 500px;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]"
 type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
function loadmap() {
 // creates the map
 var mapInstance = new SLMap(document.getElementById('map-container'));
 mapInstance.centerAndZoomAtSLCoord(new XYPoint(995,1004),2);
 
 // creates the icons
 var forsale_sign = new Img("forsale.png",80,83, true);
 var forsale_shadow = new Img("forsale-shadow.png",98,83, true);
 var forsale_icon = new Icon(forsale_sign, forsale_shadow);
 var all_images = [forsale_icon, forsale_icon, forsale_icon, forsale_icon, forsale_icon, forsale_icon];
 
 // creates the marker
 var marker = new Marker(all_images, new XYPoint(995,1004));
 mapInstance.addMarker(marker);
}
</script>
</head>
<body onload="loadmap()">
The map should show a 'for sale' sign marker with smooth edges, and an anti-aliased shadow.
</body>
== Setting a map window to close when map is moved ==
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div#map-container {
 width: 500px;
 height: 500px;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]"
 type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
function loadmap() {
 // creates the map
 var mapInstance = new SLMap(document.getElementById('map-container'));
 mapInstance.centerAndZoomAtSLCoord(new XYPoint(997.5,1001.5),2);
 
 // creates a window
 var mapWindow = new MapWindow("This is where the welcome area fountain is!! <img src='fountain.gif'>",
 {closeOnMove: true});
 mapInstance.addMapWindow(mapWindow, new XYPoint(997,1002));
}
</script>
</head>
<body onload="loadmap()">
When you drag this map, the info window should disappear:
</body>
== Alignment of marker images ==
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div#map-container1
{
 width: 400px;
 height: 400px;
}
div#map-container2
{
 width: 400px;
 height: 400px;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]"
 type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
var mapInstance, marker;
function loadmap() 
{
 // create the icons for use as a marker
 var yellow_dot_image = new Img("b_map_yellow.gif",9,9);
 var yellow_icon = new Icon(yellow_dot_image);
 var all_images = [yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon];
 
 // First map
 mapInstance1 = new SLMap(document.getElementById('map-container1'));
 mapInstance1.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
 
 // creates the marker
 marker1 = new Marker(all_images, new XYPoint(997,1002),
 {verticalAlign: "top", horizontalAlign: "left"});
 mapInstance1.addMarker(marker1);
 // Second map
 mapInstance2 = new SLMap(document.getElementById('map-container2'));
 mapInstance2.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
 
 // creates the marker
 marker2 = new Marker(all_images, new XYPoint(997,1002), 
 {verticalAlign: "bottom", horizontalAlign: "right"});
 mapInstance2.addMarker(marker2);
}
</script>
</head>
<body onload="loadmap()">
Marker icon aligned to top-left:
Marker icon aligned to bottom-right:
</body>
== Auto-centre on marker when clicked ==
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div#map-container1
{
 width: 400px;
 height: 400px;
}
div#map-container2
{
 width: 400px;
 height: 400px;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]"
 type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
var mapInstance, marker;
function loadmap() 
{
 // create the icons for use as a marker
 var yellow_dot_image = new Img("b_map_yellow.gif",9,9);
 var yellow_icon = new Icon(yellow_dot_image);
 var all_images = [yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon];
 
 // First map
 mapInstance1 = new SLMap(document.getElementById('map-container1'));
 mapInstance1.centerAndZoomAtSLCoord(new XYPoint(996,1001),2);
 
 // creates the marker
 marker1 = new Marker(all_images, new XYPoint(997,1002));
 mapInstance1.addMarker(marker1);
 // Second map
 mapInstance2 = new SLMap(document.getElementById('map-container2'));
 mapInstance2.centerAndZoomAtSLCoord(new XYPoint(996,1001),2);
 
 // creates the marker
 marker2 = new Marker(all_images, new XYPoint(997,1002), {centerOnClick: true});
 mapInstance2.addMarker(marker2);
}
</script>
</head>
<body onload="loadmap()">
Clicking on this marker should have no effect:
Clicking on this marker should center the map on the marker:
</body>
== Marker click handler ==
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div#map-container1
{
 width: 400px;
 height: 400px;
}
div#map-container2
{
 width: 400px;
 height: 400px;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]"
 type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
var mapInstance, marker;
var myClickHandler = function(marker)
{
 alert("Click handler for marker at ("+ marker.slCoord.x + ", " + marker.slCoord.y + ")");
}
function loadmap() 
{
 // create the icons for use as a marker
 var yellow_dot_image = new Img("b_map_yellow.gif",9,9);
 var yellow_icon = new Icon(yellow_dot_image);
 var all_images = [yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon];
 
 // First map
 mapInstance1 = new SLMap(document.getElementById('map-container1'));
 mapInstance1.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
 
 // creates the marker
 marker1 = new Marker(all_images, new XYPoint(997,1002));
 mapInstance1.addMarker(marker1);
 // Second map
 mapInstance2 = new SLMap(document.getElementById('map-container2'));
 mapInstance2.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
 
 // creates the marker
 marker2 = new Marker(all_images, new XYPoint(997,1002), {clickHandler: myClickHandler});
 mapInstance2.addMarker(marker2);
}
</script>
</head>
<body onload="loadmap()">
No clickhandler (default):
Click handler installed:
</body>
== Marker mouseout handler ==
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div#map-container1
{
 width: 400px;
 height: 400px;
}
div#map-container2
{
 width: 400px;
 height: 400px;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]"
 type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
var mapInstance, marker;
var myEventHandler = function(marker)
{
 alert("Mouse out handler for marker at ("+ marker.slCoord.x + ", " + marker.slCoord.y + ")");
}
function loadmap() 
{
 // create the icons for use as a marker
 var yellow_dot_image = new Img("b_map_yellow.gif",9,9);
 var yellow_icon = new Icon(yellow_dot_image);
 var all_images = [yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon];
 
 // First map
 mapInstance1 = new SLMap(document.getElementById('map-container1'));
 mapInstance1.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
 
 // creates the marker
 marker1 = new Marker(all_images, new XYPoint(997,1002));
 mapInstance1.addMarker(marker1);
 // Second map
 mapInstance2 = new SLMap(document.getElementById('map-container2'));
 mapInstance2.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
 
 // creates the marker
 marker2 = new Marker(all_images, new XYPoint(997,1002), {onMouseOutHandler: myEventHandler});
 mapInstance2.addMarker(marker2);
}
</script>
</head>
<body onload="loadmap()">
No mouseout handler (default):
Mouse out handler installed:
</body>
== Marker mouseover event handler ==
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div#map-container1
{
 width: 400px;
 height: 400px;
}
div#map-container2
{
 width: 400px;
 height: 400px;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]"
 type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
var mapInstance, marker;
var myEventHandler = function(marker)
{
 alert("Mouse over handler for marker at ("+ marker.slCoord.x + ", " + marker.slCoord.y + ")");
}
function loadmap() 
{
 // create the icons for use as a marker
 var yellow_dot_image = new Img("b_map_yellow.gif",9,9);
 var yellow_icon = new Icon(yellow_dot_image);
 var all_images = [yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon];
 
 // First map
 mapInstance1 = new SLMap(document.getElementById('map-container1'));
 mapInstance1.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
 
 // creates the marker
 marker1 = new Marker(all_images, new XYPoint(997,1002));
 mapInstance1.addMarker(marker1);
 // Second map
 mapInstance2 = new SLMap(document.getElementById('map-container2'));
 mapInstance2.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
 
 // creates the marker
 marker2 = new Marker(all_images, new XYPoint(997,1002), {onMouseOverHandler: myEventHandler});
 mapInstance2.addMarker(marker2);
}
</script>
</head>
<body onload="loadmap()">
No mouseover handler (default):
Mouse over handler installed:
</body>
== Controlling marker z-order ==
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div#map-container1
{
 width: 400px;
 height: 400px;
}
div#map-container2
{
 width: 400px;
 height: 400px;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]"
 type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
var mapInstance, marker;
function loadmap() 
{
 // create the icons for use as a marker
 var marker1_image = new Img("marker_1.gif",64,64);
 var marker1_icon = new Icon(marker1_image);
 var marker1_images = [marker1_icon, marker1_icon, marker1_icon, marker1_icon, marker1_icon, marker1_icon];
 
 var marker2_image = new Img("marker_2.gif",64,64);
 var marker2_icon = new Icon(marker2_image);
 var marker2_images = [marker2_icon, marker2_icon, marker2_icon, marker2_icon, marker2_icon, marker2_icon];
 
 // First map
 var mapInstance1 = new SLMap(document.getElementById('map-container1'));
 mapInstance1.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
 
 // creates the marker
 var marker1a = new Marker(marker1_images, new XYPoint(997,1002),
 {zLayer: 1});
 mapInstance1.addMarker(marker1a);
 var marker1b = new Marker(marker2_images, new XYPoint(997.15,1002.15),
 {zLayer: 0});
 mapInstance1.addMarker(marker1b);
 // Second map
 mapInstance2 = new SLMap(document.getElementById('map-container2'));
 mapInstance2.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
 
 // creates the marker
 var marker2a = new Marker(marker1_images, new XYPoint(997,1002),
 {zLayer: 0});
 mapInstance2.addMarker(marker2a);
 var marker2b = new Marker(marker2_images, new XYPoint(997.15,1002.15),
 {zLayer: 1});
 mapInstance2.addMarker(marker2b);
}
</script>
</head>
<body onload="loadmap()">
The '1' marker icon should be on top of the '2' marker icon:
The '2' marker icon should be on top of the '1' marker icon:
</body>
== Remove all markers from a map ==
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div#map-container {
 width: 500px;
 height: 500px;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]"
 type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
var mapInstance, marker;
function loadmap() {
 // creates the map
 mapInstance = new SLMap(document.getElementById('map-container'));
 mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
 
 // creates the icons
 var yellow_dot_image = new Img("b_map_yellow.gif",9,9);
 var yellow_icon = new Icon(yellow_dot_image);
 var all_images = [yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon];
 
 // creates the markers
 var marker = new Marker(all_images, new XYPoint(997,1002));
 mapInstance.addMarker(marker);
 marker = new Marker(all_images, new XYPoint(997.4,1002));
 mapInstance.addMarker(marker);
 marker = new Marker(all_images, new XYPoint(997.2,1002.8));
 mapInstance.addMarker(marker);
 marker = new Marker(all_images, new XYPoint(997.8,1002.2));
 mapInstance.addMarker(marker);
 marker = new Marker(all_images, new XYPoint(997.1,1002.65));
 mapInstance.addMarker(marker);
}
function removeAllMarkers() 
{
 // removes all the the marker
 mapInstance.removeAllMarkers();
}
</script>
</head>
<body onload="loadmap()">
<a href="javascript: mapInstance.removeAllMarkers();">Click to remove all the markers</a>
</body>