Skip to the following:

OS OpenSpace [logo]

Displaying information connected to a marker

OS OpenSpace map displaying information connected to a marker

How do we display a pop-up window connected to a marker? First, we need to tell the browser to pull in the OS OpenSpace JavaScript API:

  1. <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 tell JavaScript to run our initialisation function on loading the page:

  1. <body onload="init();">

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

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

Now we move on to the core of the code, actually instantiating and adding the map:

  1. <script type="text/javascript">
  2.  
  3. var osMap;
  4.  
  5. function init() {
  6.     osMap = new OpenSpace.Map('map');
  7.  
  8.     osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 3);
  9.  
  10.     /* Setup an InfoWindow at default size */
  11.     var pos = new OpenSpace.MapPoint(438760, 114760);
  12.     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\" />';
  13.     var marker = osMap.createMarker(pos, null, content);
  14. }
  15.  
  16. </script>

Let's break this up:

We start a script tag to contain our code:

  1. <script type="text/javascript">

Then we create a map object variable, osMap:

  1. var osMap;

Now we define our init function:

  1. function init()
  2. {

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

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

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

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

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

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

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

  1. 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\" />';

Finally, there is a convenience 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.

  1. var marker = osMap.createMarker(pos, null, content);

Finally, close the function and script tag.

  1. }
  2. </script>

The full example can be found below.

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title>Open Space Tutorial - Example 3</title>
  4. <script type="text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=insert_your_api_key_here"></script>
  5. </head>
  6. <body onload="init()">
  7. <script type="text/javascript">
  8.     var osMap;
  9.     function init()
  10.     {
  11.         osMap = new OpenSpace.Map('map');
  12.         osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 3);
  13.         /* Setup an InfoWindow at default size */
  14.         var pos = new OpenSpace.MapPoint(438500, 114500);
  15.         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\" />';
  16.         var marker = osMap.createMarker(pos, null, content);
  17.     }
  18. </script>
  19. <h1>Displaying information connected to a marker</h1>
  20. <div id="map" style="width: 500px; height: 300px; border: 1px solid black;"></div>
  21. </body>
  22. </html>