Examples for OSM Web Maps
This page is available in German only.
(Zu Kapitel 10.4, S. 117 und Kapitel 10.5, S. 120)
Diese Beispiele zeigen, wie Sie mit der Google Maps API oder mit OpenLayers eine OpenStreetMap-Karte auf Ihre Webseite bringen können.
Bitte beachten Sie: Ohne einen API-Key geht bei Google Maps nichts. Lesen Sie die Bedingungen unter http://www.google.com/apis/maps/signup.html durch und beantragen Sie einen kostenlosen API-Key. Diesen Key müssen Sie bei den folgenden Beispielen an passender Stelle jeweils einsetzen. Die Beispiele auf dieser Webseite benutzen einen API-Key speziell für diese Webseite, er wird auf Ihrer Seite nicht funktionieren. Für die OpenLayers-Beispiele brauchen Sie keinen API-Key.
| Link | Kapitel/Seite | Beschreibung |
|---|---|---|
| gmap-example1.html | Kapitel 10.4, S. 117 | Eine einfache Google-Karte. Es werden nur die üblichen Google-Layer "Karte", "Satellit" und "Hybrid" angezeigt. |
| gmap-example2.html | Kapitel 10.4, S. 118 | Eine einfache Google-Karte. Zusätzlich zu den Google-Layern gibt es jetzt die OpenStreetMap-Layer "Mapnik" und "T@H" (Tiles@Home/Osmarender). Am Brandenburger Tor wird ein Pin eingeblendet. |
| ol-example1.html | Kapitel 10.5, S. 120 | Eine einfache OpenLayers-Karte mit OpenStreetMap-Layern. Dieses Beispiel benutzt die "offiziellen" OSM-Layer "Tiles@Home" und "Mapnik". Sie werden über eine Javascript-Library eingebunden, die vom OSM-Server geholt wird und sollten daher auch aktuell bleiben, wenn sich Details wie Tileserver-Namen ändern. |
| ol-example2.html | Kapitel 10.5, S. 120 | Eine einfache OpenLayers-Karte mit OpenStreetMap-Layern. Dieses Beispiel bindet die Layer "Tiles@Home" und "Mapnik" zu Fuß ein. Sie können dieses Beispiel leicht als Grundlage benutzen, wenn Sie selbst eigene Tiles gerendert haben und sie hier einbinden wollen. |
![[Titelbild]](/img/cover.png)