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