No API keys needed. And if you really like it, you can later download planet vector data for free!
Source Code Explained
The new HTML5 Doctype. Some older examples won’t work with HTML5. Especially, you must make sure that #map div is larger than 0×0.
<meta charset="utf-8" />
Always define the charset in document. UTF-8 is the new black.
<div id="map" style="top: 0; left: 0; bottom: 0; right: 0; position: fixed;">
Fill parent with just CSS. This is the preferred method.
map = new OpenLayers.Map("map");
OpenLayers.Map(divName) is the main container for everything. It includes layers, all the vectors and point of interest (POI) markers.
OpenLayers.Layer.OSM() is the standard OpenStreetMap Mapnik layer. This is what you normally want.
var lonLat = new OpenLayers.LonLat(24.9342, 60.2017) .transform( new OpenLayers.Projection("EPSG:4326"), // from WGS 1984 map.getProjectionObject() // to Spherical Mercator );
You can get coordinates from OpenStreetMap.org regular web interface. Just navigate to your point of interest, using search if needed. Then click “Permalink” on bottom right. The URL shows latitude and longitude. Be careful not to mix lat and lon: they have different order in the URL and in OpenLayers.LonLat() constructor.
map.setCenter (lonLat, 14);
Center the map on the point you created. Zoom to 14, about 10 meters per pixel or 1:35.000.