Web Maps Lite API Examples

Map Markers

Leave your mark on the map

Javascript Level: Beginner

Next we're going to learn how to put markers on the map so that we can show the position of something. We use markers on the CloudMade website to show the location of our offices, but I'm sure you'll think of more interesting things to do than that.

Here's the JavaScript for the example:

var cloudmade = new CM.Tiles.CloudMade.Web({key: 'BC9A493B41014CAABB98F0471D759707'});
var map = new CM.Map('cm-example', cloudmade);
    
var myMarkerLatLng = new CM.LatLng(50.136,8.302);
var myMarker = new CM.Marker(myMarkerLatLng, {
	title: "This is the Village of Naurod"
});
    
map.setCenter(myMarkerLatLng, 14);
map.addOverlay(myMarker);

Lets take a look at the code, bit by bit.

1. First we initialize our map with CloudMade tiles:

var cloudmade = new CM.Tiles.CloudMade.Web({key: 'BC9A493B41014CAABB98F0471D759707'});
var map = new CM.Map('cm-example', cloudmade);

2. Then we create a new LatLng object, passing it the latitude and longitude you want the marker to appear at:

var myMarkerLatLng = new CM.LatLng(50.136,8.302);

3. Next we create a new Marker object, which we pass the myMarkerLatLng variable containing the latitude and longitude and a Javascript hash which contains the title of the marker.

var myMarker = new CM.Marker(myMarkerLatLon, {
	title: "This is the Village of Naurod"
});

4. Next we set the center of the map to be the position of the marker and set the zoom level to 14.

map.setCenter(myMarkerLatLng, 14);

5. Finally, we add the marker to map as an overlay:

map.addOverlay(myMarker);

Now when you hover your mouse over the marker the title will appear in a tool-tip. To find out more about markers, take a look at their JS-Doc pages.

Lets move onto the next example.

JS-docs | View example