Hallo,
Ich habe wieder mal eine frage .
Wie kann ich Openstreetmap in eine Website einbinden ?
Die Anleitung aus dem OpenStreetMap Wiki habe ich genau befolgt und hat leider nicht funktioniert. Es kommt immer nur eine Webiste mit Karte(Testversion). 
Wäre super wenn ihr mir helfen könntet.
lg
Wäre super, wenn du uns mehr Infos geben würdest 
Ein Link zu deiner Seite oder zumindest ein Stückchen Code.
Gruss
Walter
1
Hallo Michael,
Kannst Du uns einen Link setzen vom Testergebnis setzen? Ist sicherlich nur eine Kleinigkeit, den man im Code schneller sieht als man Fragen stellen kann.
Mit freundlichen Grüßen Georg V.
P.S. Willkommen im Forum.
1
mach mal den Firebug auf (F12 und reload) und dann kommt in Zeile 58: jumpTo not defined.
addMarker ist auch nicht definiert.
Gruss
walter
oder steht das in tom.js drin? jo, steht drin.
so, hab tom.js eingebaut, knallt immer noch. allerdings irgenwo in den Tiefen von OL. Würde mich mal an den Autor wenden, da ich keine Lust Zeit habe, mich um Scripte zu kümmern, die irgendwer irgendwann zusammengebaut hat und die angeblich 100% funktionieren sollen.
1
Moin,
vielleicht hilft Dir das wenn ich Dir einfach meinen Code zur Selbstbedienung freigebe?
Hier ist eine Karte mit Markern: http://yapis.eu/?id=9&lang=de
Den Pfad zum OpenLayers und ein paar Kleinigkeiten musste natürlich anpassen.
LG,
-moenk
ich glaube, den kannst du vergessen. tom hat das zeug 2008 erstellt.
Hallo,
wenn es um reine Karten mit ein paar Markern geht, empfehle ich immer Leaflet.Js (http://leafletjs.com/) .
Das kann zwar längst nicht soviel, wie OpenLayers, ist dafür aber auch schlanker im Download und etwas fixer in der Dartstellung.
Scripte hier aus dem OSM Wiki würde ich nicht mehr verwenden, weil man nicht weiß für welche Version von OpenLayers die Dinger mal gecodet wurden. OpenLayers wird ja auch weiterentwickelt.
Gruß
M
1
Kannst du mit Leaflet ohne Probleme! Einfach die die URL aus dem Beispiel auf der Startseite anpassen.
Gruß
M
1
<!DOCTYPE html>
<html>
<head>
<title>Map | Testanwendung</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
//<![CDATA[
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map');
// add a CloudMade tile layer with style #997
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
//]]>
</script>
</head>
<body>
<div id="header">
<h1>Karte (Testversion)</h1>
<div id="map"></div>
</div>
</body>
</html>
Hier ein Beispiel mit Leaflet.
Bitte beachte auch, dass externe Javascripts teilweise von Browser erst geladen werden, wenn die html Seite im HTTP Kontext liegt. Also im Browser die Adresse mit http:// beginnt und nicht mit file://
Also testweise mal auf deinen Webserver hochladen oder Lokal aufm Apache. Keine Ahnung wie bewandert du in dem Bereich bist.
EDIT: Hab grad im Screenshot gesehen, das du auf localhost unterwegs bist - sollte also nicht das Problem sein 
Gruß
M
1
Ich Depp… 
Hier nochmal neu. (Hatte die externen Links vergessen und nicht getestet)
<!DOCTYPE html>
<html>
<head>
<title>Map | Testanwendung</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
</head>
<body>
<div id="header">
<h1>Karte (Testversion)</h1>
<div id="map" style="height: 500px;"></div>
<script type="text/javascript">
//<![CDATA[
var lon = 6.641389;
var lat = 49.756667;
var zoom = 7;
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([lat, lon], zoom);
// add a CloudMade tile layer with style #997
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
}).addTo(map);
L.marker([lat, lon]).addTo(map)
//]]>
</script>
</div>
</body>
</html>
Bei mir Läuft es…
Gruß
M
Zum Code aus entstanden aus dem Wiki-Beispiel: Um die Karte selbst zu bekommen folgendes verändern:
jumpTo(lon, lat, zoom);
Ändern in:
map.setCenter(new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")), zoom);
Im Code wird zudem versucht, die Karte in das HTML-Element mit der ID “map” zu laden - das ist aber nicht vorhanden. Zudem scheint via CSS im vorgesehenen Element gar keine Größenangabe zu existieren… Daher den HTML-Code z.B. so ergänzen bzw. ändern:
<div id="map" style="width:500px; height:500px;"></div>
Funktioniert erst einmal die Kartendarstellung, sind die Marker ein weiteres Kapitel…
1
1
Klar… Da muss man dann das Script etwas anpassen, aber es geht.
Wo kommen die Marker denn her? MySQL Datenbank? Ein PHP-Script?
Bewegen sich die Marker, oder willst du neue/weitere Marker nachladen, wenn die Karte bewegt wird?
Die HTML Seite mit der Map würde per AJAX/Json die Marker laden und in die Karte schreiben.
Ich würde die Marker jedoch vorher in eine eigene LayerGroup schieben: http://leafletjs.com/reference.html#layergroup
Die LayerGroup kann man mit der Methode clearLayers() leeren und dann neu befüllen.
Du brauchst also 2 Funktionen: initMap() und getMarkers().
var map;
muss aber vorher definiert werden, damit
getMarkers()
auch Zugriff darauf hat.
Wenn Du noch weitere Fragen hast, gern.
Gruß
M