Jump to the following:

We use cookies to improve this website. Read about cookies

Displaying information connected to a marker

How do we display a pop-up window connected to a marker? We are going to build on the displaying a marker tutorial.

In this tutorial we created an HTML document with all the appropriate tags and included a DIV tag which gave instructions on how to display the map. The heavy lifting is all done within the javascript section (between the tags).

The instructions in this document will deal with this core of the code. Essentially we will be replacing the content of the displaying a marker tutorial script tags with the following:

<script type="text/javascript">
var osMap;
function init() {
osMap = new OpenSpace.Map('map');
osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 10);
/* Setup an InfoWindow at default size */
var pos = new OpenSpace.MapPoint(438760, 114760);
var content = 'Info window contents can be in <strong>HTML</strong><br />And can contain links:<br /> <a href="index.html">Back to Index</a><br />And images:<br><img  src="logo.gif" width="120" height="32" />';
var marker = osMap.createMarker(pos, null, content);
}
</script>

Let's break this up.

We start a script tag to contain our code:

<script type="text/javascript">

Then we create a map object variable, osMap:

var osMap, boundaryLayer;

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:

var options = {strategies: [new OpenSpace.Strategy.BBOX()],
area_code: ["CTY" ]
};

A position object for the marker is created holding the location of Ordnance Survey head office:

boundaryLayer = new OpenSpace.Layer.Boundary("Boundaries", options);

The contents of the info window are defined; this can be plain text or HTML containing links and images:

osMap.addLayer(boundaryLayer);

Finally, there is a convenient method on the map object that can create a marker and its associated pop-up info window and add it to the map. The method is passed in the position and the content to display in the info window. The marker is created and automatically added to the markers layer of the map before we close the function and script tag:

osMap.setCenter(new OpenSpace.MapPoint(400000, 200000), 2);
}
</script>

The full example is as follows:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Open Space Tutorial 3</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), 3);
/* Setup an InfoWindow at default size */
var pos = new OpenSpace.MapPoint(438760, 114760);
var content = 'Info window contents can be in <strong>HTML</strong><br />And can contain links:<br /> <a href="index.html">Back to Index</a><br />And images:<br><img  src="logo.gif" width="120" height="32" />';
var marker = osMap.createMarker(pos, null, content);
}
</script>
<h1>Displaying information connected to a marker</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