Webmap API Examples
Revision as of 09:42, 17 December 2007 by SignpostMarv Martin (talk | contribs) (added API portal navigation)
Second Life APIs
This page includes all examples used during beta development of the Google Map API wrapper for SL. These examples are provided as-is, and will require some adjustment to implement correctly.
A basic map
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> div#map-container { width: 500px; height: 500px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <script> function loadmap() { // creates the map mapInstance = new SLMap(document.getElementById('map-container'), {disableVoiceInfo: true}); mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); } </script> </head> <body onload="loadmap()"> <div id="map-container"></div> </body>
A map with markers
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> div#map-container { width: 500px; height: 500px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <script> function loadmap() { // creates the map var mapInstance = new SLMap(document.getElementById('map-container'), {disableVoiceInfo: true}); mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); // creates the icons var yellow_dot_image = new Img("b_map_yellow.gif",9,9); var yellow_icon = new Icon(yellow_dot_image); var all_images = [yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon]; // creates the marker var marker = new Marker(all_images, new XYPoint(997,1002)); mapInstance.addMarker(marker); } </script> <body onload="loadmap()"> <p>There should be a yellow marker in the centre of this map: <div id="map-container"></div> </body>
A map with windows
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> div#map-container { width: 500px; height: 500px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <script> function loadmap() { // creates the map var mapInstance = new SLMap(document.getElementById('map-container'), {disableVoiceInfo: true}); mapInstance.centerAndZoomAtSLCoord(new XYPoint(997.5,1001.5),2); // creates a window var mapWindow = new MapWindow("This is where the welcome area fountain is!! <br><img src='fountain.gif'>"); mapInstance.addMapWindow(mapWindow, new XYPoint(997,1002)); } </script> <body onload="loadmap()"> <p>This map should have an info window centred on the welcome fountain, and should contain a 3D picture of the fountain. <div id="map-container"></div> </body>
Markers with windows
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> div#map-container { width: 500px; height: 500px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <script> function loadmap() { // creates the map var mapInstance = new SLMap(document.getElementById('map-container'), {disableVoiceInfo: true}); mapInstance.centerAndZoomAtSLCoord(new XYPoint(997.5,1001.5),2); // creates the icons var yellow_dot_image = new Img("b_map_yellow.gif",9,9); var yellow_icon = new Icon(yellow_dot_image); var all_images = [yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon]; // creates the marker var marker = new Marker(all_images, new XYPoint(997,1002)); // creates a window var mapWindow = new MapWindow("This is where the welcome area fountain is!! <br><img src='fountain.gif'>"); // adds the marker to the map mapInstance.addMarker(marker, mapWindow); } </script> <body onload="loadmap()"> <p>This map should have a yellow marker on the welcome fountain. <p>When you click the marker, an info window should appear with a 3D picture of the fountain. <div id="map-container"></div> </body>
Teleport into SL using SLURLs
<html> <head> <script> </script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <body> <p>Click on these links to be teleported into Second Life via a SLURL: <p><a href="javascript:gotoSLURL(997,1002)"> Go to (997, 1002) </a>(where the welcome fountain is) <br /> <a href="javascript:gotoSLURL(996.5,1001.6)"> Go to (996.5, 1001.6) </a> <br /> <a href="javascript:gotoSLURL(1000,1000)"> Go to (1000, 1000) </a><br /> </body>
Removing a marker
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> div#map-container { width: 500px; height: 500px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <script> // mapInstance and marker is set as a glabal, so that the removeMarker function can access them var mapInstance, marker; function loadmap() { // creates the map mapInstance = new SLMap(document.getElementById('map-container'), {disableVoiceInfo: true}); mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); // creates the icons var yellow_dot_image = new Img("b_map_yellow.gif",9,9); var yellow_icon = new Icon(yellow_dot_image); var all_images = [yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon]; // creates the marker marker = new Marker(all_images, new XYPoint(997,1002)); mapInstance.addMarker(marker); } function removeMarker() { // removes the marker mapInstance.removeMarker(marker); } </script> <body onload="loadmap()"> <a href="javascript: removeMarker();">Click to remove the yellow marker from the map</a> <div id="map-container"></div> </body>
Customised zoom/pan controls
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> div#map-container { width: 500px; height: 500px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <script> var mapInstance; function loadmap() { // creates the map mapInstance = new SLMap(document.getElementById('map-container'), {hasZoomControls: false, hasPanningControls: false}); // mapInstance = new SLMap(document.getElementById('map-container'), {disableVoiceInfo: true}); mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); (document.getElementById('zoom_level')).innerHTML = mapInstance.getCurrentZoomLevel(); } function setZoom(level) { mapInstance.setCurrentZoomLevel(level); (document.getElementById('zoom_level')).innerHTML = mapInstance.getCurrentZoomLevel(); } function zoomIn() { mapInstance.zoomIn(); (document.getElementById('zoom_level')).innerHTML = mapInstance.getCurrentZoomLevel(); } function zoomOut() { mapInstance.zoomOut(); (document.getElementById('zoom_level')).innerHTML = mapInstance.getCurrentZoomLevel(); } </script> <body onload="loadmap()"> <p>This map has the usual pan/zoom controls disabled, and the hyperlinks below implement custom pan/zoom controls via SLMap Javascript calls. <h2>Set the zoom level</h2> <h3>The Current Zoom Level is <span style='color:red' id='zoom_level'></span></h3> <a href="javascript: setZoom(1);">1</a> <a href="javascript: setZoom(2);">2</a> <a href="javascript: setZoom(3);">3</a> <a href="javascript: setZoom(4);">4</a> <a href="javascript: setZoom(5);">5</a> <a href="javascript: setZoom(6);">6</a> <a href="javascript: zoomIn();">zoom in</a> <a href="javascript: zoomOut();">zoom out</a> <h2>Pan Around</h2> <a href="javascript: mapInstance.panLeft();">left</a> <a href="javascript: mapInstance.panRight();">right</a> <a href="javascript: mapInstance.panUp();">up</a> <a href="javascript: mapInstance.panDown();">down</a> <br><br> <div id="map-container"></div> </body>
Disabling/Enabling Dragging
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> div#map-container { width: 500px; height: 500px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <script> var mapInstance; function loadmap() { // creates the map mapInstance = new SLMap(document.getElementById('map-container'), {disableVoiceInfo: true}); mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); } </script> <body onload="loadmap()"> <p><a href="javascript: mapInstance.disableDragging();">Click to Disable Dragging of map</a> <p><a href="javascript: mapInstance.enableDragging();">Click to Enable Dragging of map</a> <div id="map-container"></div> </body>
Pan/Re-centre map
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> div#map-container { width: 500px; height: 500px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <script> var mapInstance; function loadmap() { // creates the map mapInstance = new SLMap(document.getElementById('map-container'), {disableVoiceInfo: true}); mapInstance.centerAndZoomAtSLCoord(new XYPoint(998.5,1001),2); var mapWindow1 = new MapWindow("This is (997,1002)"); var mapWindow2 = new MapWindow("This is (1000,1000)"); var mapWindow3 = new MapWindow("This is (1010.5,1000.5)"); mapInstance.addMapWindow(mapWindow1, new XYPoint(997,1002)); mapInstance.addMapWindow(mapWindow2, new XYPoint(1000,1000)); mapInstance.addMapWindow(mapWindow3, new XYPoint(1010.5,1000.5)); } </script> <body onload="loadmap()"> <p>Click the links to pan/re-centre the map on the co-ords: <p><a href="javascript: mapInstance.panOrRecenterToSLCoord(new XYPoint(1000,1000), true);">Pan or Recenter to (1000, 1000)</a></p> <p><a href="javascript: mapInstance.panOrRecenterToSLCoord(new XYPoint(1010.5,1000.5), true);">Pan or Recenter to (1010.5, 1000.5)</a></p> <div id="map-container"></div> </body>
Setting a Marker's Event Handlers
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> div#map-container { width: 500px; height: 500px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <script> function loadmap() { // creates the map var mapInstance = new SLMap(document.getElementById('map-container'), {disableVoiceInfo: true}); mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); // creates the icons var yellow_dot_image = new Img("b_map_yellow.gif",9,9); var yellow_icon = new Icon(yellow_dot_image); var all_images = [yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon]; // creates a function that we will bind to the marker click action var onmouseclickAction = function(marker) { alert("an onmouseclick action occured at (" + marker.slCoord.x + "," + marker.slCoord.y + ")"); }; // creates a function that we will bind to the marker click action var onmouseoutAction = function(marker) { alert("an onmouseout action occured at (" + marker.slCoord.x + "," + marker.slCoord.y + ")"); }; var onmouseoverAction = function(marker) { alert("an onmouseover occured at (" + marker.slCoord.x + "," + marker.slCoord.y + ")"); }; // creates the marker and sets its event handlers var marker = new Marker(all_images, new XYPoint(997,1002), {clickHandler: onmouseclickAction, onMouseOutHandler: onmouseoutAction, onMouseOverHandler: onmouseoverAction}); mapInstance.addMarker(marker); } </script> <body onload="loadmap()"> <p>This map will display alerts when the yellow marker receives any of these events: <ul> <li>Click</li> <li>Mouseover (enter)</li> <li>Mouseout (leave)</li> </ul> <div id="map-container"></div> </body>
Setting a Map's Single Click Handler
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> div#map-container { width: 500px; height: 500px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <script> function myClickHandler(x, y) { alert("The map was clicked on at (" + x + ", " + y + ")!"); } function loadmap() { // creates the map mapInstance = new SLMap(document.getElementById('map-container'), {singleClickHandler: myClickHandler}); mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); } </script> </head> <body onload="loadmap()"> <p>This map traps the click event and tells you where you clicked on the map <div id="map-container"></div> </body>
Setting a Map's Double Click Handler (has issues)
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> div#map-container { width: 500px; height: 500px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <script> function myClickHandler(x, y) { alert("The map was double-clicked on at (" + x + ", " + y + ")!"); } function loadmap() { // creates the map mapInstance = new SLMap(document.getElementById('map-container'), {doubleClickHandler: myClickHandler}); mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); } </script> </head> <body onload="loadmap()"> <p>This map traps the double-click event and tells you where you clicked on the map <p>(Issue: Google Maps automatically re-centres the map on a double-click, and this cannot be disabled) <div id="map-container"></div> </body>
Setting a Map's On-State-Changed Handler
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> div#map-container { width: 500px; height: 500px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <script> function loadmap() { // creates the map mapInstance = new SLMap(document.getElementById('map-container'), {onStateChangedHandler: doSomething}); mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); } function doSomething() { alert("the map state has changed!!"); } </script> <body onload="loadmap()"> <p>This map will display an alert whenever the map's state changes (i.e. the map is panned or zoomed) <div id="map-container"></div> </body>
Triggering a Marker Click
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> div#map-container1 { width: 500px; height: 500px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <script> // mapInstance and marker is set as a global, so that the JS handler can access them var mapInstance, marker; function loadmap() { // create the icons for use as a marker var yellow_dot_image = new Img("b_map_yellow.gif",9,9); var yellow_icon = new Icon(yellow_dot_image); var all_images = [yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon]; // Create map mapInstance = new SLMap(document.getElementById('map-container1')); mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); // creates the marker marker = new Marker(all_images, new XYPoint(998.5,1003.5), {centerOnClick: true}); mapInstance.addMarker(marker); } </script> <body onload="loadmap()"> <p><a href="javascript:mapInstance.clickMarker(marker);">Click here to simulate clicking on the marker</a> <p>(this should cause the map to centre on the marker) <div id="map-container1"></div> </body>
Get Current Map Center / Map Bounds
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> div#map-container { width: 500px; height: 500px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <script> var mapInstance; function loadmap() { // creates the map mapInstance = new SLMap(document.getElementById('map-container'), {disableVoiceInfo: true}); mapInstance.centerAndZoomAtSLCoord(new XYPoint(998.5,1001),2); var mapWindow1 = new MapWindow("This is (997,1002)"); var mapWindow2 = new MapWindow("This is (1000,1000)"); var mapWindow3 = new MapWindow("This is (1020,1020)"); mapInstance.addMapWindow(mapWindow1, new XYPoint(997,1002)); mapInstance.addMapWindow(mapWindow2, new XYPoint(1000,1000)); mapInstance.addMapWindow(mapWindow3, new XYPoint(1020,1020)); checkBounds(); } function checkBounds() { var bounds = mapInstance.getViewportBounds(); var center = mapInstance.getMapCenter(); document.getElementById('cent').innerHTML = "(" + center.x + "," + center.y + ")"; document.getElementById('xMin').innerHTML = bounds.xMin; document.getElementById('xMax').innerHTML = bounds.xMax; document.getElementById('yMin').innerHTML = bounds.yMin; document.getElementById('yMax').innerHTML = bounds.yMax; } </script> <body onload="loadmap()"> <p>Drag/zoom the map and then <a href="javascript: checkBounds();">click here</a> to check the current viewport bounds and center coordinate</p> <p>Center: <span id='cent'></span></p> <p>X-Min: <span id='xMin'></span></p> <p>X-Max: <span id='xMax'></span></p> <p>Y-Min: <span id='yMin'></span></p> <p>Y-Max: <span id='yMax'></span></p> <div id="map-container"></div> </body>
Using PNG Images and Shadows with Markers
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> div#map-container { width: 500px; height: 500px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <script> function loadmap() { // creates the map var mapInstance = new SLMap(document.getElementById('map-container'), {disableVoiceInfo: true}); mapInstance.centerAndZoomAtSLCoord(new XYPoint(995,1004),2); // creates the icons var forsale_sign = new Img("forsale.png",80,83, true); var forsale_shadow = new Img("forsale-shadow.png",98,83, true); var forsale_icon = new Icon(forsale_sign, forsale_shadow); var all_images = [forsale_icon, forsale_icon, forsale_icon, forsale_icon, forsale_icon, forsale_icon]; // creates the marker var marker = new Marker(all_images, new XYPoint(995,1004)); mapInstance.addMarker(marker); } </script> <body onload="loadmap()"> <p>The map should show a 'for sale' sign marker with smooth edges, and an anti-aliased shadow. <div id="map-container"></div> </body>
Setting a mapwindow to close when map is moved
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> div#map-container { width: 500px; height: 500px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <script> function loadmap() { // creates the map var mapInstance = new SLMap(document.getElementById('map-container'), {disableVoiceInfo: true}); mapInstance.centerAndZoomAtSLCoord(new XYPoint(997.5,1001.5),2); // creates a window var mapWindow = new MapWindow("This is where the welcome area fountain is!! <br><img src='fountain.gif'>", {closeOnMove: true}); mapInstance.addMapWindow(mapWindow, new XYPoint(997,1002)); } </script> <body onload="loadmap()"> <p>When you drag this map, the info window should disappear:<br /> <div id="map-container"></div> </body>
Alignment of marker images
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> div#map-container1 { width: 400px; height: 400px; } div#map-container2 { width: 400px; height: 400px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <script> // mapInstance and marker is set as a glabal, so that the removeMarker function can access them var mapInstance, marker; function loadmap() { // create the icons for use as a marker var yellow_dot_image = new Img("b_map_yellow.gif",9,9); var yellow_icon = new Icon(yellow_dot_image); var all_images = [yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon]; // First map mapInstance1 = new SLMap(document.getElementById('map-container1')); mapInstance1.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); // creates the marker marker1 = new Marker(all_images, new XYPoint(997,1002), {verticalAlign: "top", horizontalAlign: "left"}); mapInstance1.addMarker(marker1); // Second map mapInstance2 = new SLMap(document.getElementById('map-container2')); mapInstance2.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); // creates the marker marker2 = new Marker(all_images, new XYPoint(997,1002), {verticalAlign: "bottom", horizontalAlign: "right"}); mapInstance2.addMarker(marker2); } </script> <body onload="loadmap()"> <p>Marker icon aligned to top-left: <div id="map-container1"></div> <p>Marker icon aligned to bottom-right: <div id="map-container2"></div> </body>
Auto-centre on marker when clicked
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> div#map-container1 { width: 400px; height: 400px; } div#map-container2 { width: 400px; height: 400px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <script> // mapInstance and marker is set as a glabal, so that the removeMarker function can access them var mapInstance, marker; function loadmap() { // create the icons for use as a marker var yellow_dot_image = new Img("b_map_yellow.gif",9,9); var yellow_icon = new Icon(yellow_dot_image); var all_images = [yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon]; // First map mapInstance1 = new SLMap(document.getElementById('map-container1')); mapInstance1.centerAndZoomAtSLCoord(new XYPoint(996,1001),2); // creates the marker marker1 = new Marker(all_images, new XYPoint(997,1002)); mapInstance1.addMarker(marker1); // Second map mapInstance2 = new SLMap(document.getElementById('map-container2')); mapInstance2.centerAndZoomAtSLCoord(new XYPoint(996,1001),2); // creates the marker marker2 = new Marker(all_images, new XYPoint(997,1002), {centerOnClick: true}); mapInstance2.addMarker(marker2); } </script> <body onload="loadmap()"> <p>Clicking on this marker should have no effect: <div id="map-container1"></div> <p>Clicking on this marker should center the map on the marker: <div id="map-container2"></div> </body>
Marker click handler
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> div#map-container1 { width: 400px; height: 400px; } div#map-container2 { width: 400px; height: 400px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <script> // mapInstance and marker is set as a glabal, so that the removeMarker function can access them var mapInstance, marker; var myClickHandler = function(marker) { alert("Click handler for marker at ("+ marker.slCoord.x + ", " + marker.slCoord.y + ")"); } function loadmap() { // create the icons for use as a marker var yellow_dot_image = new Img("b_map_yellow.gif",9,9); var yellow_icon = new Icon(yellow_dot_image); var all_images = [yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon]; // First map mapInstance1 = new SLMap(document.getElementById('map-container1')); mapInstance1.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); // creates the marker marker1 = new Marker(all_images, new XYPoint(997,1002)); mapInstance1.addMarker(marker1); // Second map mapInstance2 = new SLMap(document.getElementById('map-container2')); mapInstance2.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); // creates the marker marker2 = new Marker(all_images, new XYPoint(997,1002), {clickHandler: myClickHandler}); mapInstance2.addMarker(marker2); } </script> <body onload="loadmap()"> <p>No clickhandler (default): <div id="map-container1"></div> <p>Click handler installed: <div id="map-container2"></div> </body>
Marker mouse-out handler
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> div#map-container1 { width: 400px; height: 400px; } div#map-container2 { width: 400px; height: 400px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <script> // mapInstance and marker is set as a glabal, so that the removeMarker function can access them var mapInstance, marker; var myEventHandler = function(marker) { alert("Mouse out handler for marker at ("+ marker.slCoord.x + ", " + marker.slCoord.y + ")"); } function loadmap() { // create the icons for use as a marker var yellow_dot_image = new Img("b_map_yellow.gif",9,9); var yellow_icon = new Icon(yellow_dot_image); var all_images = [yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon]; // First map mapInstance1 = new SLMap(document.getElementById('map-container1')); mapInstance1.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); // creates the marker marker1 = new Marker(all_images, new XYPoint(997,1002)); mapInstance1.addMarker(marker1); // Second map mapInstance2 = new SLMap(document.getElementById('map-container2')); mapInstance2.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); // creates the marker marker2 = new Marker(all_images, new XYPoint(997,1002), {onMouseOutHandler: myEventHandler}); mapInstance2.addMarker(marker2); } </script> <body onload="loadmap()"> <p>No mouseout handler (default): <div id="map-container1"></div> <p>Mouse out handler installed: <div id="map-container2"></div> </body>
Marker mouse-over handler
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> div#map-container1 { width: 400px; height: 400px; } div#map-container2 { width: 400px; height: 400px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <script> // mapInstance and marker is set as a glabal, so that the removeMarker function can access them var mapInstance, marker; var myEventHandler = function(marker) { alert("Mouse over handler for marker at ("+ marker.slCoord.x + ", " + marker.slCoord.y + ")"); } function loadmap() { // create the icons for use as a marker var yellow_dot_image = new Img("b_map_yellow.gif",9,9); var yellow_icon = new Icon(yellow_dot_image); var all_images = [yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon]; // First map mapInstance1 = new SLMap(document.getElementById('map-container1')); mapInstance1.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); // creates the marker marker1 = new Marker(all_images, new XYPoint(997,1002)); mapInstance1.addMarker(marker1); // Second map mapInstance2 = new SLMap(document.getElementById('map-container2')); mapInstance2.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); // creates the marker marker2 = new Marker(all_images, new XYPoint(997,1002), {onMouseOverHandler: myEventHandler}); mapInstance2.addMarker(marker2); } </script> <body onload="loadmap()"> <p>No mouseover handler (default): <div id="map-container1"></div> <p>Mouse over handler installed: <div id="map-container2"></div> </body>
Marker Z-order control
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> div#map-container1 { width: 400px; height: 400px; } div#map-container2 { width: 400px; height: 400px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <script> // mapInstance and marker is set as a glabal, so that the removeMarker function can access them var mapInstance, marker; function loadmap() { // create the icons for use as a marker var marker1_image = new Img("marker_1.gif",64,64); var marker1_icon = new Icon(marker1_image); var marker1_images = [marker1_icon, marker1_icon, marker1_icon, marker1_icon, marker1_icon, marker1_icon]; var marker2_image = new Img("marker_2.gif",64,64); var marker2_icon = new Icon(marker2_image); var marker2_images = [marker2_icon, marker2_icon, marker2_icon, marker2_icon, marker2_icon, marker2_icon]; // First map var mapInstance1 = new SLMap(document.getElementById('map-container1')); mapInstance1.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); // creates the marker var marker1a = new Marker(marker1_images, new XYPoint(997,1002), {zLayer: 1}); mapInstance1.addMarker(marker1a); var marker1b = new Marker(marker2_images, new XYPoint(997.15,1002.15), {zLayer: 0}); mapInstance1.addMarker(marker1b); // Second map mapInstance2 = new SLMap(document.getElementById('map-container2')); mapInstance2.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); // creates the marker var marker2a = new Marker(marker1_images, new XYPoint(997,1002), {zLayer: 0}); mapInstance2.addMarker(marker2a); var marker2b = new Marker(marker2_images, new XYPoint(997.15,1002.15), {zLayer: 1}); mapInstance2.addMarker(marker2b); } </script> <body onload="loadmap()"> <p>The '1' marker icon should be on top of the '2' marker icon: <div id="map-container1"></div> <p>The '2' marker icon should be on top of the '1' marker icon: <div id="map-container2"></div> </body>
Remove all markers from a map
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> div#map-container { width: 500px; height: 500px; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=[YOUR GOOGLE MAP API KEY HERE]" type="text/javascript"></script> <script src="../slmapapi.js" type="text/javascript"></script> <script> // mapInstance and marker is set as a glabal, so that the removeMarker function can access them var mapInstance, marker; function loadmap() { // creates the map mapInstance = new SLMap(document.getElementById('map-container'), {disableVoiceInfo: true}); mapInstance.centerAndZoomAtSLCoord(new XYPoint(997,1002),2); // creates the icons var yellow_dot_image = new Img("b_map_yellow.gif",9,9); var yellow_icon = new Icon(yellow_dot_image); var all_images = [yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon]; // creates the markers var marker = new Marker(all_images, new XYPoint(997,1002)); mapInstance.addMarker(marker); marker = new Marker(all_images, new XYPoint(997.4,1002)); mapInstance.addMarker(marker); marker = new Marker(all_images, new XYPoint(997.2,1002.8)); mapInstance.addMarker(marker); marker = new Marker(all_images, new XYPoint(997.8,1002.2)); mapInstance.addMarker(marker); marker = new Marker(all_images, new XYPoint(997.1,1002.65)); mapInstance.addMarker(marker); } function removeAllMarkers() { // removes all the the marker mapInstance.removeAllMarkers(); } </script> <body onload="loadmap()"> <a href="javascript: mapInstance.removeAllMarkers();">Click to remove all the markers</a> <div id="map-container"></div> </body>