Difference between revisions of "Webmap API Examples"
Jump to navigation
Jump to search
Rand Linden (talk | contribs) |
Rand Linden (talk | contribs) |
||
(17 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
{{Help/Box| | {{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>}} | |||
Line 7: | Line 12: | ||
__TOC__ | __TOC__ | ||
This | 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 == | ||
<pre> | <pre> | ||
<html> | <html> | ||
Line 42: | Line 26: | ||
height: 500px; | height: 500px; | ||
} | } | ||
</style> | |||
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | ||
type="text/javascript"></script> | type="text/javascript"></script> | ||
<script src="http://slurl.com/_scripts/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 248: | 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> | </pre> | ||
== | == Disabling and enabling dragging == | ||
<pre> | <pre> | ||
<html> | <html> | ||
Line 345: | Line 75: | ||
height: 500px; | height: 500px; | ||
} | } | ||
</style> | </style> | ||
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | ||
type="text/javascript"></script> | type="text/javascript"></script> | ||
<script src=". | <script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script> | ||
<script> | <script> | ||
var mapInstance; | var mapInstance; | ||
Line 355: | Line 84: | ||
function loadmap() { | function loadmap() { | ||
// creates the map | // creates the map | ||
mapInstance = new SLMap(document.getElementById('map-container') | 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 365: | Line 95: | ||
<div id="map-container"></div> | <div id="map-container"></div> | ||
</body> | </body> | ||
</pre> | </pre> | ||
== Pan and re-center map == | |||
== Pan | |||
<pre> | <pre> | ||
<html> | <html> | ||
Line 382: | Line 108: | ||
height: 500px; | height: 500px; | ||
} | } | ||
</style> | |||
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | ||
type="text/javascript"></script> | type="text/javascript"></script> | ||
<script src=". | <script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script> | ||
<script> | <script> | ||
var mapInstance; | var mapInstance; | ||
Line 392: | Line 118: | ||
function loadmap() { | function loadmap() { | ||
// creates the map | // creates the map | ||
mapInstance = new SLMap(document.getElementById('map-container') | mapInstance = new SLMap(document.getElementById('map-container')); | ||
mapInstance.centerAndZoomAtSLCoord(new XYPoint(998.5,1001),2); | mapInstance.centerAndZoomAtSLCoord(new XYPoint(998.5,1001),2); | ||
Line 405: | 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 | |||
<pre> | <pre> | ||
<html> | <html> | ||
Line 427: | Line 153: | ||
height: 500px; | height: 500px; | ||
} | } | ||
</style> | </style> | ||
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | ||
type="text/javascript"></script> | type="text/javascript"></script> | ||
<script src=". | <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') | var mapInstance = new SLMap(document.getElementById('map-container')); | ||
mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); | mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); | ||
Line 459: | 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 474: | 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 | |||
<pre> | <pre> | ||
<html> | <html> | ||
Line 489: | Line 214: | ||
height: 500px; | height: 500px; | ||
} | } | ||
</style> | |||
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | ||
type="text/javascript"></script> | type="text/javascript"></script> | ||
<script src=". | <script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script> | ||
<script> | <script> | ||
function myClickHandler(x, y) | function myClickHandler(x, y) | ||
{ | { | ||
Line 507: | Line 230: | ||
mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); | mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); | ||
} | } | ||
</script> | </script> | ||
</head> | </head> | ||
Line 514: | 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> | |||
<pre> | <pre> | ||
<html> | <html> | ||
Line 529: | Line 251: | ||
height: 500px; | height: 500px; | ||
} | } | ||
</style> | |||
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | ||
type="text/javascript"></script> | type="text/javascript"></script> | ||
<script src=". | <script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script> | ||
<script> | <script> | ||
function myClickHandler(x, y) | function myClickHandler(x, y) | ||
{ | { | ||
Line 554: | 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 | |||
<pre> | <pre> | ||
<html> | <html> | ||
Line 571: | Line 287: | ||
height: 500px; | height: 500px; | ||
} | } | ||
</style> | |||
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | ||
type="text/javascript"></script> | type="text/javascript"></script> | ||
<script src=". | <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 583: | 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 | |||
<pre> | <pre> | ||
<html> | <html> | ||
Line 609: | Line 320: | ||
height: 500px; | height: 500px; | ||
} | } | ||
</style> | |||
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | ||
type="text/javascript"></script> | type="text/javascript"></script> | ||
<script src=". | <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 634: | 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 641: | Line 352: | ||
<div id="map-container1"></div> | <div id="map-container1"></div> | ||
</body> | </body> | ||
</pre> | </pre> | ||
== Get current map center and map bounds == | |||
== Get | |||
<pre> | <pre> | ||
<html> | <html> | ||
Line 656: | Line 364: | ||
height: 500px; | height: 500px; | ||
} | } | ||
</style> | |||
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | ||
type="text/javascript"></script> | type="text/javascript"></script> | ||
<script src=". | <script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script> | ||
<script> | <script> | ||
var mapInstance; | var mapInstance; | ||
Line 666: | Line 374: | ||
function loadmap() { | function loadmap() { | ||
// creates the map | // creates the map | ||
mapInstance = new SLMap(document.getElementById('map-container') | mapInstance = new SLMap(document.getElementById('map-container')); | ||
mapInstance.centerAndZoomAtSLCoord(new XYPoint(998.5,1001),2); | mapInstance.centerAndZoomAtSLCoord(new XYPoint(998.5,1001),2); | ||
Line 690: | 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 703: | 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 | |||
<pre> | <pre> | ||
<html> | <html> | ||
Line 718: | Line 424: | ||
height: 500px; | height: 500px; | ||
} | } | ||
</style> | |||
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | ||
type="text/javascript"></script> | type="text/javascript"></script> | ||
<script src=". | <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') | var mapInstance = new SLMap(document.getElementById('map-container')); | ||
mapInstance.centerAndZoomAtSLCoord(new XYPoint(995,1004),2); | mapInstance.centerAndZoomAtSLCoord(new XYPoint(995,1004),2); | ||
Line 740: | 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 | |||
<pre> | <pre> | ||
<html> | <html> | ||
Line 761: | Line 463: | ||
height: 500px; | height: 500px; | ||
} | } | ||
</style> | |||
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | ||
type="text/javascript"></script> | type="text/javascript"></script> | ||
<script src=". | <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') | 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 778: | 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 806: | Line 504: | ||
height: 400px; | height: 400px; | ||
} | } | ||
</style> | |||
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | ||
type="text/javascript"></script> | type="text/javascript"></script> | ||
<script src=". | <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 840: | 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 848: | 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 870: | Line 565: | ||
height: 400px; | height: 400px; | ||
} | } | ||
</style> | |||
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | ||
type="text/javascript"></script> | type="text/javascript"></script> | ||
<script src=". | <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 902: | 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 910: | Line 605: | ||
<div id="map-container2"></div> | <div id="map-container2"></div> | ||
</body> | </body> | ||
</pre> | </pre> | ||
== Marker click handler == | == Marker click handler == | ||
Line 932: | Line 624: | ||
height: 400px; | height: 400px; | ||
} | } | ||
</style> | |||
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | ||
type="text/javascript"></script> | type="text/javascript"></script> | ||
<script src=". | <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 969: | 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 977: | Line 669: | ||
<div id="map-container2"></div> | <div id="map-container2"></div> | ||
</body> | </body> | ||
</pre> | </pre> | ||
== Marker mouseout handler == | |||
== Marker | |||
<pre> | <pre> | ||
<html> | <html> | ||
Line 999: | Line 688: | ||
height: 400px; | height: 400px; | ||
} | } | ||
</style> | |||
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | ||
type="text/javascript"></script> | type="text/javascript"></script> | ||
<script src=". | <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,036: | 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,044: | Line 733: | ||
<div id="map-container2"></div> | <div id="map-container2"></div> | ||
</body> | </body> | ||
</pre> | </pre> | ||
== Marker mouseover event handler == | |||
== Marker | |||
<pre> | <pre> | ||
<html> | <html> | ||
Line 1,066: | Line 752: | ||
height: 400px; | height: 400px; | ||
} | } | ||
</style> | |||
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | ||
type="text/javascript"></script> | type="text/javascript"></script> | ||
<script src=". | <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,103: | 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,111: | Line 797: | ||
<div id="map-container2"></div> | <div id="map-container2"></div> | ||
</body> | </body> | ||
</pre> | </pre> | ||
== Controlling marker z-order == | |||
== | |||
<pre> | <pre> | ||
<html> | <html> | ||
Line 1,133: | Line 816: | ||
height: 400px; | height: 400px; | ||
} | } | ||
</style> | |||
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | ||
type="text/javascript"></script> | type="text/javascript"></script> | ||
<script src=". | <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,180: | 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,188: | 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,203: | Line 883: | ||
height: 500px; | height: 500px; | ||
} | } | ||
</style> | |||
<script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" | ||
type="text/javascript"></script> | type="text/javascript"></script> | ||
<script src=". | <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,214: | Line 894: | ||
function loadmap() { | function loadmap() { | ||
// creates the map | // creates the map | ||
mapInstance = new SLMap(document.getElementById('map-container') | mapInstance = new SLMap(document.getElementById('map-container')); | ||
mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); | mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); | ||
Line 1,240: | 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.
Second Life APIs
This article provides the complete HTML and Javascript code for all Webmap API examples. You may need to modify the code to work on your system; in particular, see:
- Prerequisites for using the Webmap API.
- Required image files used in some of the examples.
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>