Jump to the following:

We use cookies to improve this website. Read about cookies

Create a new web page with your Web-map builder map

You can directly create a page with your Web-map builder map on it.

Start by copying your API key script directly from the top of the web-map builder code and pasting it between the tags of your web page.

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

To show the web-map that you created, it’s functionality needs to be copied from the web-map builder code into your web page. Copy the web-map builder code from inside these tags and paste it including the script tags between the head tags of your web page.

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

…paste the code between these tags…

</script>
</head>
<body>
</body>
</html>

The tag needs to include an onload function to call the web-map builder script. This can be copied from the bottom of your web-map builder code.

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

…paste the code between these tags…

</script>
</head>
<body onload="initmapbuilder()">
</body>
</html>

It is necessary that the page contains a div tag named ‘map’. A div tag defines a division within the content of a page, so the div tag script should be positioned in your web page where you want the web-map to go.

Copy the div script from the bottom of your web-map builder code. And paste it within the body tags of your web page.

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

…paste the code between these tags…

</script>
</head>
<body onload="initmapbuilder()">
<div id="map" style="border: 1px solid black; width:540; height:440;"></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