Jump to the following:

Ordnance Survey logo

Discover Ordnance Survey

Skip primary navigation
Site Search
Skip secondary navigation

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 by first copying your API key script directly from the top of 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>
Skip supplementary navigation

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