Harry Wood
home
>
maps
>
examples
> web-maps-lite > markers >
CloudMade JavaScript API
CloudMade JavaScript API
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>CloudMade JavaScript API example</title> </head> <body> <div id="cm-example" style="width: 500px; height: 400px"></div> <script type="text/javascript" src="http://tile.cloudmade.com/wml/0.2/web-maps-lite.js"></script> <script type="text/javascript"> var cloudmade = new CM.Tiles.CloudMade.Web({key: 'BC9A493B41014CAABB98F0471D759707'}); var map = new CM.Map('cm-example', cloudmade); //Create new icons as copies of the CM.DEFAULT_ICON (same size and anchor pos) var greenIcon = new CM.Icon(CM.DEFAULT_ICON, "marker-green.png" ); var yellowIcon = new CM.Icon(CM.DEFAULT_ICON, "marker-yellow.png" ); var blueIcon = new CM.Icon(CM.DEFAULT_ICON, "marker-blue.png" ); var purpleIcon = new CM.Icon(CM.DEFAULT_ICON, "marker-purple.png" ); var t50Icon = new CM.Icon(CM.DEFAULT_ICON, "marker-t50.png" ); //Define markers var greenMarker = new CM.Marker( new CM.LatLng(30.037, 31.310) , {icon: greenIcon}); var yellowMarker = new CM.Marker( new CM.LatLng(30.040, 31.320) , {icon: yellowIcon}); var blueMarker = new CM.Marker( new CM.LatLng(30.021, 31.242) , {icon: blueIcon}); var purpleMarker = new CM.Marker( new CM.LatLng(30.006, 31.252) , {icon: purpleIcon}); var t50Marker = new CM.Marker( new CM.LatLng(30.055, 31.259) , {icon: t50Icon}); //Set up map map.setCenter( new CM.LatLng(30.0393, 31.2816) , 12); map.addOverlay(greenMarker); map.addOverlay(yellowMarker); map.addOverlay(blueMarker); map.addOverlay(purpleMarker); map.addOverlay(t50Marker); </script> </body> </html>
view directly
Home
Blog
About
Maps
Other
Contact