Jump to the following:

We use cookies to improve this website. Read about cookies

Displaying a marker on a map – part 2

Continuing the tutorial...

Next we create a position object holding the location of Ordnance Survey head office:

var pos = new OpenSpace.MapPoint(438760, 114760);

And a marker at the above location:

var marker = new OpenLayers.Marker(pos);

Finally, we add the marker to the markers layer, close the function and script tag.

markers.addMarker(marker);
}
</script>

The full example can be found below.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> OpenSpace Tutorial 2</title>
<script type="text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=insert_your_api_key_here"></script>
</head>
<body onload="init()">
<script type="text/javascript">
var osMap;
function init()
{
      osMap = new OpenSpace.Map('map');
      osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 10);
      var markers = new OpenLayers.Layer.Markers("Markers");
      osMap.addLayer(markers);
      var pos = new OpenSpace.MapPoint(438760, 114760);
      var marker = new OpenLayers.Marker(pos);
      markers.addMarker(marker);
}
</script>
<h1<Displaying a marker on a map>/h1>
<div id="map" style="width: 500px; height: 300px; border: 1px solid
black;"></div>
</body>
</html>

We hope you find this useful.

Back to top
© Ordnance Survey 2016
Be sure to take a look at our Terms of Use and Privacy Policy