Difference between revisions of "Webmap API Examples"

From Second Life Wiki
Jump to navigation Jump to search
(added API portal navigation)
 
(23 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{Help/Box|NOTE|<b>The examples in this article have been integrated directly into the other articles in the Webmap API documentation; please see these articles:
* [[Webmap API]]
* [[Webmap API Advanced Examples]]
This article is being maintained temporarily for reference, but will be deleted soon.
</b>}}
{{:Web Services Portal/navigation
{{:Web Services Portal/navigation
|style=style="float:right;width:15em;padding-bottom:1em;"}}
|style=style="float:right;width:15em;padding-bottom:1em;"}}
Line 4: Line 12:
__TOC__
__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 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:
* [[Webmap_API#Prerequisites|Prerequisites]] for using the Webmap API.
* [[Webmap_API#Required_image_files|Required image files]] used in some of the examples.


 
== Removing a marker ==
 
== A basic map ==  
<pre>
<pre>
<html>
<html>
Line 18: Line 26:
       height: 500px;
       height: 500px;
}
}
</style>
</style>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;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>
</pre>
== A map with markers ==
<pre>
<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&amp;v=2&amp;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>
</pre>


== A map with windows ==
<pre>
<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&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
   type="text/javascript"></script>
   type="text/javascript"></script>
<script src="../slmapapi.js" 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>
<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>
</pre>
 
 
 
== Markers with windows ==
<pre>
<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&amp;v=2&amp;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>
</pre>
 
 
 
== Teleport into SL using SLURLs ==
<pre>
<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&amp;v=2&amp;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>
</pre>
 
 
 
== Removing a marker ==
<pre>
<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&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
  type="text/javascript"></script>
<script src="../slmapapi.js" type="text/javascript"></script>
<script>
<script>
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
Line 226: Line 54:
   mapInstance.removeMarker(marker);
   mapInstance.removeMarker(marker);
}
}
</script>
</script>
</head>
<body onload="loadmap()">
<body onload="loadmap()">
<a href="javascript: removeMarker();">Click to remove the yellow marker from the map</a>
<a href="javascript: removeMarker();">Click to remove the yellow marker from the map</a>
<div id="map-container"></div>
<div id="map-container"></div>
</body>
</body>
</pre>
== Customised zoom/pan controls ==
<pre>
<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&amp;v=2&amp;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>
</pre>
</pre>






== Disabling/Enabling Dragging ==
== Disabling and enabling dragging ==
<pre>
<pre>
<html>
<html>
Line 323: Line 75:
       height: 500px;
       height: 500px;
}
}
</style>
</style>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
   type="text/javascript"></script>
   type="text/javascript"></script>
<script src="../slmapapi.js" type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
<script>
var mapInstance;
var mapInstance;
Line 333: Line 84:
function loadmap() {
function loadmap() {
   // creates the map
   // creates the map
   mapInstance = new SLMap(document.getElementById('map-container'), {disableVoiceInfo: true});
   mapInstance = new SLMap(document.getElementById('map-container'));
   mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
   mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
}
}


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


<div id="map-container"></div>
<div id="map-container"></div>
</body>
</body>
</pre>
</pre>


 
== Pan and re-center map ==
 
== Pan/Re-centre map ==
<pre>
<pre>
<html>
<html>
Line 360: Line 108:
       height: 500px;
       height: 500px;
}
}
</style>


</style>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
   type="text/javascript"></script>
   type="text/javascript"></script>
<script src="../slmapapi.js" type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
<script>
var mapInstance;
var mapInstance;
Line 370: Line 118:
function loadmap() {
function loadmap() {
   // creates the map
   // creates the map
   mapInstance = new SLMap(document.getElementById('map-container'), {disableVoiceInfo: true});
   mapInstance = new SLMap(document.getElementById('map-container'));
   mapInstance.centerAndZoomAtSLCoord(new XYPoint(998.5,1001),2);
   mapInstance.centerAndZoomAtSLCoord(new XYPoint(998.5,1001),2);
    
    
Line 383: Line 131:


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


 
== Setting a marker's event handlers ==
 
== Setting a Marker's Event Handlers ==
<pre>
<pre>
<html>
<html>
Line 405: Line 153:
       height: 500px;
       height: 500px;
}
}
</style>
</style>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
   type="text/javascript"></script>
   type="text/javascript"></script>
<script src="../slmapapi.js" type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
<script>
function loadmap() {
function loadmap() {
   // creates the map
   // creates the map
   var mapInstance = new SLMap(document.getElementById('map-container'), {disableVoiceInfo: true});
   var mapInstance = new SLMap(document.getElementById('map-container'));
   mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
   mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
    
    
Line 437: Line 183:
    
    
   // creates the marker and sets its event handlers
   // creates the marker and sets its event handlers
   var marker = new Marker(all_images, new XYPoint(997,1002), {clickHandler: onmouseclickAction, onMouseOutHandler: onmouseoutAction, onMouseOverHandler: onmouseoverAction});
   var marker = new Marker(all_images,  
                          new XYPoint(997,1002),  
                          {clickHandler: onmouseclickAction,  
                          onMouseOutHandler: onmouseoutAction,  
                          onMouseOverHandler: onmouseoverAction});
   mapInstance.addMarker(marker);
   mapInstance.addMarker(marker);
}
}
</script>
</script>
</head>
<body onload="loadmap()">
<body onload="loadmap()">
<p>This map will display alerts when the yellow marker receives any of these events:
<p>This map will display alerts when the yellow marker receives any of these events:
Line 452: Line 202:
<div id="map-container"></div>
<div id="map-container"></div>
</body>
</body>
</pre>
</pre>


 
== Setting a map's single click handler ==
 
== Setting a Map's Single Click Handler ==
<pre>
<pre>
<html>
<html>
Line 467: Line 214:
       height: 500px;
       height: 500px;
}
}
</style>


</style>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
   type="text/javascript"></script>
   type="text/javascript"></script>
<script src="../slmapapi.js" type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
   
<script>
<script>
function myClickHandler(x, y)
function myClickHandler(x, y)
{
{
Line 485: Line 230:
   mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
   mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
}
}
</script>
</script>
</head>
</head>
Line 492: Line 236:
<div id="map-container"></div>
<div id="map-container"></div>
</body>
</body>
</pre>
</pre>


== Setting a map's double click event handler  ==


<span style="background: yellow">This is reported to have some (undetermined) issues.</span>


== Setting a Map's Double Click Handler (has issues) ==
<pre>
<pre>
<html>
<html>
Line 507: Line 251:
       height: 500px;
       height: 500px;
}
}
</style>


</style>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
   type="text/javascript"></script>
   type="text/javascript"></script>
<script src="../slmapapi.js" type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
   
<script>
<script>
function myClickHandler(x, y)
function myClickHandler(x, y)
{
{
Line 532: Line 274:
<p>(Issue: Google Maps automatically re-centres the map on a double-click, and this cannot be disabled)
<p>(Issue: Google Maps automatically re-centres the map on a double-click, and this cannot be disabled)
<div id="map-container"></div>
<div id="map-container"></div>
</body>
</body>
</pre>
</pre>


 
== Setting a map's state-changed handler ==
 
== Setting a Map's On-State-Changed Handler ==
<pre>
<pre>
<html>
<html>
Line 549: Line 287:
       height: 500px;
       height: 500px;
}
}
</style>


</style>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
   type="text/javascript"></script>
   type="text/javascript"></script>
<script src="../slmapapi.js" type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
<script>
function loadmap() {
function loadmap() {
   // creates the map
   // creates the map
Line 561: Line 298:
   mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
   mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
}
}
function doSomething() {
function doSomething() {
   alert("the map state has changed!!");
   alert("the map state has changed!!");
}
}
</script>
</script>
</head>
<body onload="loadmap()">
<body onload="loadmap()">
<p>This map will display an alert whenever the map's state changes (i.e. the map is panned or zoomed)
<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>
<div id="map-container"></div>
</body>
</body>
</pre>
</pre>


 
== Triggering a marker click ==
 
== Triggering a Marker Click ==
<pre>
<pre>
<html>
<html>
Line 587: Line 320:
       height: 500px;
       height: 500px;
}
}
</style>


</style>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
   type="text/javascript"></script>
   type="text/javascript"></script>
<script src="../slmapapi.js" type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
<script>
// mapInstance and marker is set as a global, so that the JS handler can access them
// mapInstance and marker is set as a global, so that the JS handler can access them
Line 612: Line 345:


}
}
</script>
</script>
</head>
<body onload="loadmap()">
<body onload="loadmap()">
<p><a href="javascript:mapInstance.clickMarker(marker);">Click here to simulate clicking on the marker</a>
<p><a href="javascript:mapInstance.clickMarker(marker);">Click here to simulate clicking on the marker</a>
Line 619: Line 352:
<div id="map-container1"></div>
<div id="map-container1"></div>
</body>
</body>
</pre>
</pre>


 
== Get current map center and map bounds ==
 
== Get Current Map Center / Map Bounds ==
<pre>
<pre>
<html>
<html>
Line 634: Line 364:
       height: 500px;
       height: 500px;
}
}
</style>


</style>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
   type="text/javascript"></script>
   type="text/javascript"></script>
<script src="../slmapapi.js" type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
<script>
var mapInstance;
var mapInstance;
Line 644: Line 374:
function loadmap() {
function loadmap() {
   // creates the map
   // creates the map
   mapInstance = new SLMap(document.getElementById('map-container'), {disableVoiceInfo: true});
   mapInstance = new SLMap(document.getElementById('map-container'));
   mapInstance.centerAndZoomAtSLCoord(new XYPoint(998.5,1001),2);
   mapInstance.centerAndZoomAtSLCoord(new XYPoint(998.5,1001),2);
    
    
Line 668: Line 398:
   document.getElementById('yMax').innerHTML = bounds.yMax;
   document.getElementById('yMax').innerHTML = bounds.yMax;
}
}
</script>
</script>
</head>
<body onload="loadmap()">
<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>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>Center: <span id='cent'></span></p>
Line 681: Line 412:
<div id="map-container"></div>
<div id="map-container"></div>
</body>
</body>
</pre>
</pre>


 
== Using PNG images and shadows with markers ==
 
== Using PNG Images and Shadows with Markers ==
<pre>
<pre>
<html>
<html>
Line 696: Line 424:
       height: 500px;
       height: 500px;
}
}
</style>


</style>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
   type="text/javascript"></script>
   type="text/javascript"></script>
<script src="../slmapapi.js" type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
<script>
function loadmap() {
function loadmap() {
   // creates the map
   // creates the map
   var mapInstance = new SLMap(document.getElementById('map-container'), {disableVoiceInfo: true});
   var mapInstance = new SLMap(document.getElementById('map-container'));
   mapInstance.centerAndZoomAtSLCoord(new XYPoint(995,1004),2);
   mapInstance.centerAndZoomAtSLCoord(new XYPoint(995,1004),2);
    
    
Line 718: Line 445:
   mapInstance.addMarker(marker);
   mapInstance.addMarker(marker);
}
}
</script>
</script>
</head>
<body onload="loadmap()">
<body onload="loadmap()">
<p>The map should show a 'for sale' sign marker with smooth edges, and an anti-aliased shadow.
<p>The map should show a 'for sale' sign marker with smooth edges, and an anti-aliased shadow.
<div id="map-container"></div>
<div id="map-container"></div>
</body>
</body>
</pre>
</pre>


 
== Setting a map window to close when map is moved ==
 
== Setting a mapwindow to close when map is moved ==
<pre>
<pre>
<html>
<html>
Line 739: Line 463:
       height: 500px;
       height: 500px;
}
}
</style>


</style>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
   type="text/javascript"></script>
   type="text/javascript"></script>
<script src="../slmapapi.js" type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
<script>
function loadmap() {
function loadmap() {
   // creates the map
   // creates the map
   var mapInstance = new SLMap(document.getElementById('map-container'), {disableVoiceInfo: true});
   var mapInstance = new SLMap(document.getElementById('map-container'));
   mapInstance.centerAndZoomAtSLCoord(new XYPoint(997.5,1001.5),2);
   mapInstance.centerAndZoomAtSLCoord(new XYPoint(997.5,1001.5),2);
    
    
Line 756: Line 479:
   mapInstance.addMapWindow(mapWindow, new XYPoint(997,1002));
   mapInstance.addMapWindow(mapWindow, new XYPoint(997,1002));
}
}
</script>
</script>
</head>
<body onload="loadmap()">
<body onload="loadmap()">
<p>When you drag this map, the info window should disappear:<br />
<p>When you drag this map, the info window should disappear:<br />
<div id="map-container"></div>
<div id="map-container"></div>
</body>
</body>
</pre>
</pre>


== Alignment of marker images ==
== Alignment of marker images ==
Line 784: Line 504:
       height: 400px;
       height: 400px;
}
}
</style>


</style>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
   type="text/javascript"></script>
   type="text/javascript"></script>
<script src="../slmapapi.js" type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
<script>
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
Line 818: Line 538:
   mapInstance2.addMarker(marker2);
   mapInstance2.addMarker(marker2);
}
}
</script>
</script>
</head>
<body onload="loadmap()">
<body onload="loadmap()">
<p>Marker icon aligned to top-left:
<p>Marker icon aligned to top-left:
Line 826: Line 546:
<div id="map-container2"></div>
<div id="map-container2"></div>
</body>
</body>
</pre>
</pre>


== Auto-centre on marker when clicked ==
== Auto-centre on marker when clicked ==
Line 848: Line 565:
       height: 400px;
       height: 400px;
}
}
</style>


</style>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
   type="text/javascript"></script>
   type="text/javascript"></script>
<script src="../slmapapi.js" type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
<script>
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
Line 880: Line 597:
   mapInstance2.addMarker(marker2);
   mapInstance2.addMarker(marker2);
}
}
</script>
</script>
</head>
<body onload="loadmap()">
<body onload="loadmap()">
<p>Clicking on this marker should have no effect:
<p>Clicking on this marker should have no effect:
Line 888: Line 605:
<div id="map-container2"></div>
<div id="map-container2"></div>
</body>
</body>
</pre>
</pre>


== Marker click handler ==
== Marker click handler ==
Line 910: Line 624:
       height: 400px;
       height: 400px;
}
}
</style>


</style>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
   type="text/javascript"></script>
   type="text/javascript"></script>
<script src="../slmapapi.js" type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
<script>
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
Line 947: Line 661:
   mapInstance2.addMarker(marker2);
   mapInstance2.addMarker(marker2);
}
}
</script>
</script>
</head>
<body onload="loadmap()">
<body onload="loadmap()">
<p>No clickhandler (default):
<p>No clickhandler (default):
Line 955: Line 669:
<div id="map-container2"></div>
<div id="map-container2"></div>
</body>
</body>
</pre>
</pre>


 
== Marker mouseout handler ==
 
== Marker mouse-out handler ==
<pre>
<pre>
<html>
<html>
Line 977: Line 688:
       height: 400px;
       height: 400px;
}
}
</style>


</style>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
   type="text/javascript"></script>
   type="text/javascript"></script>
<script src="../slmapapi.js" type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
<script>
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
Line 1,014: Line 725:
   mapInstance2.addMarker(marker2);
   mapInstance2.addMarker(marker2);
}
}
</script>
</script>
</head>
<body onload="loadmap()">
<body onload="loadmap()">
<p>No mouseout handler (default):
<p>No mouseout handler (default):
Line 1,022: Line 733:
<div id="map-container2"></div>
<div id="map-container2"></div>
</body>
</body>
</pre>
</pre>


 
== Marker mouseover event handler ==
 
== Marker mouse-over handler ==
<pre>
<pre>
<html>
<html>
Line 1,044: Line 752:
       height: 400px;
       height: 400px;
}
}
</style>


</style>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
   type="text/javascript"></script>
   type="text/javascript"></script>
<script src="../slmapapi.js" type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
<script>
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
Line 1,081: Line 789:
   mapInstance2.addMarker(marker2);
   mapInstance2.addMarker(marker2);
}
}
</script>
</script>
</head>
<body onload="loadmap()">
<body onload="loadmap()">
<p>No mouseover handler (default):
<p>No mouseover handler (default):
Line 1,089: Line 797:
<div id="map-container2"></div>
<div id="map-container2"></div>
</body>
</body>
</pre>
</pre>


 
== Controlling marker z-order ==
 
== Marker Z-order control ==
<pre>
<pre>
<html>
<html>
Line 1,111: Line 816:
       height: 400px;
       height: 400px;
}
}
</style>


</style>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
   type="text/javascript"></script>
   type="text/javascript"></script>
<script src="../slmapapi.js" type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
<script>
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
Line 1,158: Line 863:


}
}
</script>
</script>
</head>
<body onload="loadmap()">
<body onload="loadmap()">
<p>The '1' marker icon should be on top of the '2' marker icon:
<p>The '1' marker icon should be on top of the '2' marker icon:
Line 1,166: Line 871:
<div id="map-container2"></div>
<div id="map-container2"></div>
</body>
</body>
</pre>
</pre>


== Remove all markers from a map ==
== Remove all markers from a map ==
Line 1,181: Line 883:
       height: 500px;
       height: 500px;
}
}
</style>


</style>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[YOUR GOOGLE MAP API KEY HERE]"
   type="text/javascript"></script>
   type="text/javascript"></script>
<script src="../slmapapi.js" type="text/javascript"></script>
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script>
<script>
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
// mapInstance and marker is set as a glabal, so that the removeMarker function can access them
Line 1,192: Line 894:
function loadmap() {
function loadmap() {
   // creates the map
   // creates the map
   mapInstance = new SLMap(document.getElementById('map-container'), {disableVoiceInfo: true});
   mapInstance = new SLMap(document.getElementById('map-container'));
   mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
   mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2);
    
    
Line 1,218: Line 920:
   mapInstance.removeAllMarkers();
   mapInstance.removeAllMarkers();
}
}
</script>
</script>
</head>
<body onload="loadmap()">
<body onload="loadmap()">
<a href="javascript: mapInstance.removeAllMarkers();">Click to remove all the markers</a>
<a href="javascript: mapInstance.removeAllMarkers();">Click to remove all the markers</a>
<div id="map-container"></div>
<div id="map-container"></div>
</body>
</body>
</pre>
</pre>

Latest revision as of 10:57, 30 January 2009

NOTE

The examples in this article have been integrated directly into the other articles in the Webmap API documentation; please see these articles:

This article is being maintained temporarily for reference, but will be deleted soon.


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:

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>


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()">
<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'));
  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'));
  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 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()">
<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'));
  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'));
  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'));
  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'));
  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>