OpenStreetMap statt Google Maps
Um nicht unwissentlich in legale Probleme zu stolpern, empfiehlt sich statt der Verwendung des Google Maps-IFrame-Quellcodes auf geschäftlich oder sonstwie kommerziell orientierten Websites der Einsatz von OpenLayers, dem Pendant zu erstgenanntem für OpenStreetMap.
Für die Unwissenden: Die geografischen Daten von OSM sind komplett frei verfügbar (GNU GPL). Sie werden von freiwilligen Helfern mittels GPS-Tracking selbständig zusammengetragen und bearbeitet. Im Vergleich zum Start vor ein paar Jahren ist OSM sehr weit gediehen, so dass das Kartenmaterial Deutschland weitestgehend abdeckt. In Großstädten ist die Detailansicht natürlich auf dem ausführlichsten sowie aktuellsten Stand (wie auch bei allen anderen (nicht-freien) Implementationen).
Folgend also eine schrittweise Anleitung, wie man das bei sich selbst einbettet.
Nachtrag: Der folgende Text wirkt zwar äußerst komplex, ist es aber nicht. Letztlich geht es nur um einzelne Stellen, die man suchen, herauskopieren und woanders wieder einfügen muss. Simpelstes Copy + Paste also.
Schritt #0: So soll’s mal aussehen
Für die Ungeduldigen gibt’s natürlich erstmal eine Vorschau auf das, was ich in den nächsten 3 Schritten erstellen werde 
Schritt #1: Adresse suchen
Für unser Beispiel verwende ich die Adresse der Expo 2000, oder genauer:
Expo 2000 Hannover GmbH, Expo Plaza 11, Hannover
Von Google Maps holen wir uns nun den Quellcode des IFrames mittels Klick auf “Link” und Copy + Paste. Früher waren die richtigen Geokoordinaten auch in der normalen URL (erstes Feld = “Link”) enthalten, das ist aber offenbar inzwischen nicht mehr der Fall – deshalb dieser etwas umständlichere Weg.
Schritt #2: Richtige Geokoordinaten extrahieren
Von Schritt #1 her haben wir nun folgenden Quellcode, aus dem wir nun die für die Folgeschritte wichtigen Geokoordinaten extrahieren:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.de
/maps?f=q&source=s_q&hl=de&geocode=&q=Expo+2000+Hannover+GmbH,+Expo+Plaza+11,+Hannover&sll=51.151786,10.415039&
sspn=19.530948,39.243164&ie=UTF8&ll=52.321203,9.818475&spn=0.006295,0.006295&output=embed"></iframe>
<br />
<small><a href="http://maps.google.de/maps?f=q&source=embed&hl=de&geocode=&
q=Expo+2000+Hannover+GmbH,+Expo+Plaza+11,+Hannover&sll=51.151786,10.415039&sspn=19.530948,39.243164&ie=UTF8&
ll=52.321203,9.818475&spn=0.006295,0.006295" style="color:#0000FF;text-align:left">Größere Kartenansicht</a></small>
Der von mir markierte Text im src-Attribut des Inline Frames ist der für uns relevante Teil. Wir benötigen nur den Zahlenpart, also einmal 52.321203 und zum anderen 9.818475. Ersteres ist die sog. Latitude, letzteres die Longitude.
Schritt #3: Vorbereiten des OpenLayer-Quellcodes
Den diesem Artikel zugrundeliegenden Quelltext für die Einbindung von OpenLayers findet man im OSM-Wiki als “OpenLayers Simple Example”. Das englische Original ist aktueller und besser verständlich als die deutsche Übersetzung.
Den folgenden Quelltext habe ich leicht angepasst, was den JS-Aufruf anbelangt, ansonsten ist er aber identisch mit dem oben zu findenden Original:
<html>
<head>
<title>OpenStreetMap</title>
<style type="text/css">
/* styling for OpenLayers Map */
body div#map {
width: 80%;
height: 80%;
clear: both;
margin: 40px auto !important;
border: 2px solid #fc0;
}
</style>
<!-- bring in the OpenLayers javascript library
(here we bring it from the remote site, but you could
easily serve up this javascript yourself) -->
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<!-- bring in the OpenStreetMap OpenLayers layers.
Using this hosted file will make sure we are kept up
to date with any necessary changes -->
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">
// Start position for the map (hardcoded here for simplicity,
// but maybe you want to get from URL params)
// (Though to get it from the URL it's simpler to use the Permalink and ArgParser controls)
var lat=52.321203;
var lon=9.818475;
var zoom=16;
var map; //complex object of type OpenLayers.Map
//Initialise the 'map' object
function init() {
map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.Attribution()],
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0399,
numZoomLevels: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
// Define the map layer
// Note that we use a predefined layer that will be
// kept up to date with URL changes
// Here we define just one layer, but providing a choice
// of several layers is also quite simple
// Other defined layers are OpenLayers.Layer.OSM.Mapnik, OpenLayers.Layer.OSM.Maplint and OpenLayers.Layer.OSM.CycleMap
layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
map.addLayer(layerTilesAtHome);
if( ! map.getCenter() ){
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter (lonLat, zoom);
}
}
</script>
</head>
<body>
<!-- define a DIV into which the map will appear. -->
<div id="map"></div>
<script type="text/javascript">
init();
</script>
</body>
</html>
Wichtig sind nun die hervorgehobenen drei Zeilen:
- var lat=52.321203 – dies ist unser erster Wert, die Latitude
- var lon=9.818475; – Wert Nr. 2, die Longitude
- var zoom=16; – Gibt den Zoomlevel an. In diesem Fall Stufe 16 (geht bis Stufe 17). Je größer die Zahl, desto mehr Details werden angezeigt.
Jetzt gilt es nur noch, die Teile ordentlich in der eigenen Website zu integrieren. Und das war’s letztlich schon
Tipp: Eine Markierung in der Karte einfügen
Dafür muss man im Quellcode den Teil ab // Define the map layer bis vor der letzen, schließenden geschweiften Klammer “}” und dem schließenden script-Tag mit folgendem Quelltext ersetzen:
// Define the map layer
// Note that we use a predefined layer that will be
// kept up to date with URL changes
// Here we define just one layer, but providing a choice
// of several layers is also quite simple
// Other defined layers are OpenLayers.Layer.OSM.Mapnik, OpenLayers.Layer.OSM.Maplint and OpenLayers.Layer.OSM.CycleMap
layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(layerMapnik);
layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
map.addLayer(layerTilesAtHome);
layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
map.addLayer(layerCycleMap);
layerMarkers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(layerMarkers);
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter (lonLat, zoom);
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
Demo gibt's natürlich auch dazu. (für Wild-Drauflos-Klicker, wie etwa den werten Sebastian: Dies ist die Demo für die Variante MIT Markierung )
Als Grundlage hierzu dient der OSM-Wiki-Eintrag "OpenLayers Marker Example".
Tipp: WordPress-Unterstützung:
Für WordPress gibt es ein hübsches Plugin, dass einem zumindest Schritt 2 und 3 erspart. Mittels Shortcodes lassen sich damit von einfachen bis extra-komplexen Kartenausschnitten alle möglichen Variationen in Posts, Pages, usw. einfügen.
Hi Leute!
Ich muss in einer OSMKarte Point of Interest (POI) setzten(roter Punkt) mit der Maus.
Anstatt des roten Punktes soll jedoch ein Symbol sein.Ich soll dies aus der OpenLayers Javascriptbibliothek nehmen..Könnt Ihr mir
bei diesem Problem weiterhelfen?
Meldet euch bitte!!!ist sehr wichtig
Have a look at OSM-map generator for Non-WP-pages:
http://osmtools.de/easymap/
@werhahn: Heimlich? Nix mit “heimlich”. Klick doch bitte mal die verlinkten Artikel in Wikipedia an, danach bist du sicher deutlich schlauer (und redest hier nicht so einen Unfug von “heimlich” zusammen)
Und warum die OSMler nicht bei Google Maps klauen (können), ist ganz einfach: Kommerzielle Anbieter fügen in ihre Karten immer wieder absichtlich Fehler ein – quasi als Wasserzeichen. Wird nun dieser Inhalt andernortens verwendet, kann der geneigte Rechteinhaber anhand der nur ihm bekannten Fehler nachvollziehen, dass das verwendete Material aus seiner Produktion stammt.
Und da OSM ein für JEDEN offenes Projekt ist, kann auch wirklich JEDER selbst nachprüfen, ob das eingetragene Kartenmaterial nicht vielleicht doch unrechtmäßig aus anderen Quellen übernommen worden ist.
Übrigens befindet sich tatsächlich (ursprünglich) kommerziell erstelltes Kartenmaterial mit drin – allerdings haben die Rechteinhaber (z.B. die Stadt Karlsruhe) diese Daten freiwillig und von sich aus OSM zur weiteren Nutzung überlassen.
Dasselbe steht übrigens auch in deren FAQ. Lesen bildet eben immer noch deutlich mehr, als mal eben so drauflos zu motzen
cu, w0lf.
Dann wirds wohl das einfachste sein, wenn Du einfach von keinem der Anbieter irgend eine Karte benutzt.
Albern – OpenStreetMaps nutzen, aber die Infos doch heimlich bei Google ziehen…
Wer garantiert, dass die OpenStreetMapper nicht einfach bei Maps klauen, und ICH dann den Ärger bekomme, wenn Google das mal bemerkt?
Nee die Demo lief bei mir nicht aus dem Grund, dass ich beim betrachten einen Link nach http://arkona2/xxxxxx hatte, den Link hast Du ja nun geändert.
Was ich mit studiert meine ist einfach, dass es auf mich beim aller ersten Anblick wegen dem ganzen Code – ohne den Text gelesen zu haben – recht kompliziert wirkte.
@ Sebastian:
a) Also die Demo läuft bei mir mit allen gängigen Browsern (Firefox 3.0.x, IE 6 – 8, Safari 3.1) bis auf Opera 10a1 einwandfrei.
b) Nein, ich habe Programmieren mit 10 Jahren an meinem alten C128Diesel gelernt. Und für das bisserl copy + paste, was hier passiert, braucht man wirklich nicht studiert zu haben
Aber wer dafür zu faul ist, der darf auch gerne was zahlen für den Einsatz kommerziellen Kartenmaterials
cu, w0lf.
ps: an einem primitiven Generator, der Schritt 2 + 3 automatisiert, arbeite ich natürlich bereits.
Demo geht nicht, ansonsten schreckt Deine Anleitung ganz schön ab, da muss man bestimmt studiert haben um so ne Karte einzubauen.