<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
<head>
<style>
html,body { margin: 0; padding: 0; width: 1004px; height: 590px; }
#map { width: 100%; height: 100%; border: 1px solid black; float: left; z-index: -1; }
div.olControlAttribution { bottom: 0.5em; font-size: 70%; }
</style>
<script src='OpenLayers.js'></script>
<script src='osm/OpenStreetMap.js'></script>
<script type="text/javascript">
var map; //complex object of type OpenLayers.Map
var lat=51.51922
var lon=-0.12736
var zoom=17
function init() {
map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.Attribution()],
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(layerMapnik);
var lonLat = new OpenLayers.LonLat(lon, lat).
transform(map.displayProjection, map.projection);
map.setCenter(lonLat, zoom);
}
</script>
</head>
<body onload="init();">
<div id='map'></div>
</body>
</html>