Jump to the following:

Ordnance Survey logo

Discover Ordnance Survey

Skip primary navigation
Site Search
Skip secondary navigation

Displaying a marker on a map

How do we display a marker on a map? In this example, we will start with a simple HTML document header and include a title for our page:


<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<title>OpenSpace Tutorial 2</title>

Now, we need to tell the browser to pull in the OS OpenSpace JavaScript API:


<script type="text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=insert_your_api_key_here"></script>

Next, in the body, we need to close the head tag and tell JavaScript to run our initialisation function on loading the page:


</head>
<body onload="init();">

Now we move on to the core of the code, actually instantiating and adding the map (see below for a detailed breakdown of this code):


<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, marker;
     pos = new OpenSpace.MapPoint(438760, 114760);
     marker = new OpenLayers.Marker(pos);
     markers.addMarker(marker);
}
</script>

Next we’ll add some text to our web page


<h1>Displaying a marker on a map</h1>

Now we need to add a map DIV element; this is the HTML element that will contain the map:


<div id="map" style="width: 500px; height: 300px; border: 1px solid
      black;"></div>

Finally we’ll close the HTML document.


</body>
</html>

Let's break up the core code

We start a script tag to contain our code:


<script type="text/javascript">

Then we create a map object variable, osMap:


var osMap;

Now we define our init function:


function init()
{

Create a new OS OpenSpace map object and pass it our 'map' element id. This is the HTML div that will hold the map.


osMap = new OpenSpace.Map('map');

We now set the centre of the map above Ordnance Survey head office.


osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 10);

We create a 'markers' layer and add it to the map:


var markers = new OpenLayers.Layer.Markers("Markers");
osMap.addLayer(markers);

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>
Skip supplementary navigation

For general enquiries, complaints, feedback or suggestions, email: customerservices@ordnancesurvey.co.uk or call us on 08456 05 05 05