Difference between revisions of "Webmap API Examples"

Revision as of 18:03, 23 January 2009

Update notice

We've made improvements and changes to the Webmap API, effective January 15, 2009.
Some information here may be out of date as we update the wiki with the changes. Thanks for your patience.

Second Life APIs

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.

Simple 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>
function loadmap() {
  // creates the map
  mapInstance = new SLMap(document.getElementById('map-container'), {disableVoiceInfo: true});
  mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
}
</script>
</head>
<body onload="loadmap()">
<div id="map-container"></div>
</body>

Map with 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>
function loadmap() {
  // creates the map
  var 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
  var marker = new Marker(all_images, new XYPoint(997,1002));
  mapInstance.addMarker(marker);
}
</script>
</head>
<body onload="loadmap()">
<p>There should be a yellow marker in the center of this map:
<div id="map-container"></div>
</body>

Map with windows

<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'), {disableVoiceInfo: true});
  mapInstance.centerAndZoomAtSLCoord(new XYPoint(997.5,1001.5),2);
  
  // creates a window
  var mapWindow = new MapWindow("This is where the welcome area fountain is!! <br><img src='fountain.gif'>");
  mapInstance.addMapWindow(mapWindow, new XYPoint(997,1002));
}
</script>
</head>
<body onload="loadmap()">
<p>This map shows an information window centered on the welcome fountain, and displays contain a 3D picture of the
fountain.
<div id="map-container"></div>
</body>

Markers with windows

<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'), {disableVoiceInfo: true});
  mapInstance.centerAndZoomAtSLCoord(new XYPoint(997.5,1001.5),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
  var marker = new Marker(all_images, new XYPoint(997,1002));
  
  // creates a window
  var mapWindow = new MapWindow("This is where the welcome area fountain is!! <br><img src='fountain.gif'>");
  
  // adds the marker to the map
  mapInstance.addMarker(marker, mapWindow);
}
</script>
</head>
<body onload="loadmap()">
<p>This map should have a yellow marker on the welcome fountain.  
<p>When you click the marker, an info window should
appear with a 3D picture of the fountain.
<div id="map-container"></div>
</body>

Teleport into Second Life using SLURLs

This example is not currently working

<html>
<head>
<script>
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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>
</head>
<body>
<p>Click on these links to be teleported into Second Life via a SLURL:
<p><a href="javascript:gotoSLURL(997,1002)"> Go to (997, 1002) </a>(where the welcome fountain is) <br />
<a href="javascript:gotoSLURL(996.5,1001.6)"> Go to (996.5, 1001.6) </a> <br />

<a href="javascript:gotoSLURL(1000,1000)"> Go to (1000, 1000) </a><br />
</body>

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>
<div id="map-container"></div>
</body>

Customised zoom and pan controls

<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'), {hasZoomControls: false, hasPanningControls: false});
//  mapInstance = new SLMap(document.getElementById('map-container'), {disableVoiceInfo: true});
  mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
  
  (document.getElementById('zoom_level')).innerHTML = mapInstance.getCurrentZoomLevel();
}

function setZoom(level) {
  mapInstance.setCurrentZoomLevel(level);
  (document.getElementById('zoom_level')).innerHTML = mapInstance.getCurrentZoomLevel();
}

function zoomIn() {
  mapInstance.zoomIn();
  (document.getElementById('zoom_level')).innerHTML = mapInstance.getCurrentZoomLevel();
}

function zoomOut() {
  mapInstance.zoomOut();
  (document.getElementById('zoom_level')).innerHTML = mapInstance.getCurrentZoomLevel();
}
</script>
</head>
<body onload="loadmap()">
<p>This map has the usual pan/zoom controls disabled, and the hyperlinks below implement custom pan/zoom controls via SLMap Javascript calls.
<h2>Set the zoom level</h2>
<h3>The Current Zoom Level is <span style='color:red' id='zoom_level'></span></h3>

<a href="javascript: setZoom(1);">1</a>

<a href="javascript: setZoom(2);">2</a>
<a href="javascript: setZoom(3);">3</a>
<a href="javascript: setZoom(4);">4</a>
<a href="javascript: setZoom(5);">5</a>
<a href="javascript: setZoom(6);">6</a>
<a href="javascript: zoomIn();">zoom in</a>
<a href="javascript: zoomOut();">zoom out</a>

<h2>Pan Around</h2>

<a href="javascript: mapInstance.panLeft();">left</a>
<a href="javascript: mapInstance.panRight();">right</a>
<a href="javascript: mapInstance.panUp();">up</a>
<a href="javascript: mapInstance.panDown();">down</a>
<br><br>
<div id="map-container"></div>
</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'), {disableVoiceInfo: true});
  mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
}

</script>
</head>
<body onload="loadmap()">
<p><a href="javascript: mapInstance.disableDragging();">Click to Disable Dragging of map</a>
<p><a href="javascript: mapInstance.enableDragging();">Click to Enable Dragging of map</a>

<div id="map-container"></div>
</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'), {disableVoiceInfo: true});
  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()">
<p>Click the links to pan/re-centre the map on the co-ords:
<p><a href="javascript: mapInstance.panOrRecenterToSLCoord(new XYPoint(1000,1000), true);">Pan or Recenter to (1000, 1000)</a></p>
<p><a href="javascript: mapInstance.panOrRecenterToSLCoord(new XYPoint(1010.5,1000.5), true);">Pan or Recenter to (1010.5, 1000.5)</a></p>

<div id="map-container"></div>
</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'), {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 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()">
<p>This map will display alerts when the yellow marker receives any of these events:
<ul>
<li>Click</li>
<li>Mouseover (enter)</li>

<li>Mouseout (leave)</li>
</ul>
<div id="map-container"></div>
</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()">
<p>This map traps the click event and tells you where you clicked on the map
<div id="map-container"></div>
</body>

Setting a mp'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()">
<p>This map traps the double-click event and tells you where you clicked on the map
<p>(Issue: Google Maps automatically re-centres the map on a double-click, and this cannot be disabled)
<div id="map-container"></div>
</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()">
<p>This map will display an alert whenever the map's state changes (i.e. the map is panned or zoomed)
<div id="map-container"></div>
</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()">
<p><a href="javascript:mapInstance.clickMarker(marker);">Click here to simulate clicking on the marker</a>
<p>(this should cause the map to centre on the marker)
<div id="map-container1"></div>
</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'), {disableVoiceInfo: true});
  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()">
<p>Drag/zoom the map and then <a href="javascript: checkBounds();">click here</a> to check the current viewport bounds and center coordinate</p>

<p>Center: <span id='cent'></span></p>
<p>X-Min: <span id='xMin'></span></p>

<p>X-Max: <span id='xMax'></span></p>
<p>Y-Min: <span id='yMin'></span></p>
<p>Y-Max: <span id='yMax'></span></p>
<div id="map-container"></div>
</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'), {disableVoiceInfo: true});
  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()">
<p>The map should show a 'for sale' sign marker with smooth edges, and an anti-aliased shadow.
<div id="map-container"></div>
</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'), {disableVoiceInfo: true});
  mapInstance.centerAndZoomAtSLCoord(new XYPoint(997.5,1001.5),2);
  
  // creates a window
  var mapWindow = new MapWindow("This is where the welcome area fountain is!! <br><img src='fountain.gif'>",
                                {closeOnMove: true});
  mapInstance.addMapWindow(mapWindow, new XYPoint(997,1002));
}
</script>
</head>
<body onload="loadmap()">
<p>When you drag this map, the info window should disappear:<br />
<div id="map-container"></div>
</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()">
<p>Marker icon aligned to top-left:
<div id="map-container1"></div>
<p>Marker icon aligned to bottom-right:
<div id="map-container2"></div>
</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()">
<p>Clicking on this marker should have no effect:
<div id="map-container1"></div>
<p>Clicking on this marker should center the map on the marker:
<div id="map-container2"></div>
</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()">
<p>No clickhandler (default):
<div id="map-container1"></div>
<p>Click handler installed:
<div id="map-container2"></div>
</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()">
<p>No mouseout handler (default):
<div id="map-container1"></div>
<p>Mouse out handler installed:
<div id="map-container2"></div>
</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()">
<p>No mouseover handler (default):
<div id="map-container1"></div>
<p>Mouse over handler installed:
<div id="map-container2"></div>
</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()">
<p>The '1' marker icon should be on top of the '2' marker icon:
<div id="map-container1"></div>
<p>The '2' marker icon should be on top of the '1' marker icon:
<div id="map-container2"></div>
</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'), {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 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>
<div id="map-container"></div>
</body>