Difference between revisions of "Webmap API Examples"

From Second Life Wiki
Jump to navigation Jump to search
m (MapAPIExamples moved to Webmap API Examples: camelCaseIsTehSuxxor)
(added API portal navigation)
Line 1: Line 1:
= Example Code for the Second Life Map API =
{{:Web Services Portal/navigation
|style=style="float:right;width:15em;padding-bottom:1em;"}}
 
__TOC__


This page includes all examples used during beta development of the Google Map API wrapper for SL. These examples are provided as-is, and will require some adjustment to implement correctly.
This page includes all examples used during beta development of the Google Map API wrapper for SL. These examples are provided as-is, and will require some adjustment to implement correctly.

Revision as of 09:42, 17 December 2007

This page includes all examples used during beta development of the Google Map API wrapper for SL. These examples are provided as-is, and will require some adjustment to implement correctly.


A basic 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="../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>


A map 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="../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>
<body onload="loadmap()">
<p>There should be a yellow marker in the centre of this map:
<div id="map-container"></div>
</body>


A 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="../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>
<body onload="loadmap()">
<p>This map should have an info window centred on the welcome fountain, and should 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="../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>
<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 SL using SLURLs

<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="../slmapapi.js" type="text/javascript"></script>
<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="../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>
<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/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="../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>
<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/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="../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>
<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/Re-centre 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="../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>
<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="../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>
<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="../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 Map's Double Click Handler (has 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="../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 On-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="../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>
<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="../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>
<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 / 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="../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>
<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="../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>
<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 mapwindow 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="../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>
<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="../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>
<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="../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>
<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="../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>
<body onload="loadmap()">
<p>No clickhandler (default):
<div id="map-container1"></div>
<p>Click handler installed:
<div id="map-container2"></div>
</body>


Marker mouse-out 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="../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>
<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 mouse-over 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="../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>
<body onload="loadmap()">
<p>No mouseover handler (default):
<div id="map-container1"></div>
<p>Mouse over handler installed:
<div id="map-container2"></div>
</body>


Marker Z-order control

<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="../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>
<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="../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>
<body onload="loadmap()">
<a href="javascript: mapInstance.removeAllMarkers();">Click to remove all the markers</a>
<div id="map-container"></div>
</body>
Retrieved from "https://wiki.secondlife.com/w/index.php?title=Webmap_API_Examples&oldid=45015"