OSM Demo 1

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.js"></script>
<div id="map" style="width: 500px; height:400px;"></div>

JavaScript

var map;
    function init() {
        // Karten Objekt erzeugen, dies wird später als referenz genutzt um die Karte zu manipulieren 
        // API: http://dev.openlayers.org/apidocs/files/OpenLayers/Map-js.html
        map = new OpenLayers.Map('map', {
		units: 'm',
		projection: new OpenLayers.Projection("EPSG:900913"),
		displayProjection: new OpenLayers.Projection("EPSG:4326"),
        controls: [
            // Steuerelemente der Karte (
            // API: http://dev.openlayers.org/apidocs/files/OpenLayers/Control-js.html
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.PanZoomBar(),
            new OpenLayers.Control.LayerSwitcher(),
            new OpenLayers.Control.Attribution(),
            new OpenLayers.Control.MousePosition(),
            new OpenLayers.Control.KeyboardDefaults()
            ]
        });

        // Die Karte besteht aus s.g. Layer (Ebenen). Hier erstellen wir den Layer für das OSM Kartenmaterial
        // API: http://dev.openlayers.org/apidocs/files/OpenLayers/Layer-js.html
        osm = new OpenLayers.Layer.OSM("OpenStreetMap");
        // Fügt den Layer dem Karten Objekt "map" hinzu
        map.addLayer(osm);

        // Karte an einen bestimten Punkt zentrieren (Berlin, Bundestag)
        // API: http://dev.openlayers.org/apidocs/files/OpenLayers/Map-js.html#OpenLayers.Map.setCenter 
        map.setCenter(
            new OpenLayers.LonLat(13.37290, 52.52018).transform(
                new OpenLayers.Projection("EPSG:4326"),
                map.getProjectionObject()
            ), 15
        );
    }
// GoGo
init();