Put the Sutton Green Map on your web site
There are two ways that you can put the Sutton Green Map onto your web site - a quick and easy iframe, or embedding our full javascript into your web page.
Quick and easy
Put an iframe into your code to get the basic map.
The code
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.openstreetmap.org/export/embed.html?bbox=-0.2461,51.3328,-0.1197,51.3916&layer=mapnik" style="border: 1px solid black"></iframe><br />
<small><a href="http://www.openstreetmap.org/?lat=51.3622&lon=-0.1829&zoom=12&layers=B000FTFT">View Larger Map</a></small>
The result
View Larger Map
If you want to change the area shown, just use the export function on the OpenStreetMap web site to get the embedded HTML.
Embed the full map
Put our Javascript code into your web page, and get the basic map plus all of our "point of interest" overlays (planning alerts, culture, etc.).
The code
Place the following code into the head section of your HTML:
<script type="text/javascript" src="http://map.oneplanetsutton.org/openlayers/OpenLayers.js"></script>
<script type="text/javascript" src="http://map.oneplanetsutton.org/map.js"></script>
<script type="text/javascript">
function init(){
initMap(-0.179, 51.363, 13);
slider = new fx.Height('mapkey');
}
</script>
<!--[if IE 6]><script src="/scripts/ie6-fix.js" type="text/javascript"></script><![endif]-->
<!--[if IE 7]><script src="/scripts/ie7-fix.js" type="text/javascript"></script><![endif]-->
Put the following Javascript into the body:
<body onload="init()">
Finally put this div with the exact "map" id into the page where you want the map to show, and optionally define the height/width:
<div id="map" style="width: 500px; height: 300px;">
The result
Look no further than the map page to see the map in action!
