OpenStreetMap als Google Maps Alternative in WordPress

Lesedauer: 5 Minuten

Seit jeher binde ich Kartenmaterial von Google Maps in meine Reiseberichte ein.  Ich selbst finde es einfach interessanter, wenn man zu den Erzählungen und Berichten über fremde Länder und Orte auch das dazu passende Kartenmaterial bekommt. So bekommt man viel eher ein Gefühl für Distanzen oder die Umgebung.

Google Maps für Seitenbetreiber kostenpflichtig

Google Maps war dabei immer die Referenz für mich, das hatte mehrere Gründe:

  • Das kostenlose und umfangreiche WordPress Plugin Comprehensive Google Maps (CGM)
  • Die Möglichkeit unter Google Maps eigene Karten anzulegen, inkl. Routen und Marker und diese dann in eine KML zu exportieren, die ich wiederum in das  CGM Plugin einbinden und laden konnte. So konnte ich z.B. die Routenvorschläge in meinem Rom-Reisebericht erstellen und euch zur Verfügung stellen.
  • Ich konnte Satellitendaten, Gelände oder die normale Karte nutzen und somit z.B. ein Gefühl für bergige Landschaft geben.

Google Maps hatte aber auch immer den bitteren Beigeschmack, dass Sitzungsdaten der User zwangsläufig an Google gehen. Wie sonst sollten die benötigten Karten geladen werden.

Seit Juni 2018 ist Google Maps allerdings kostenpflichtig geworden, wenn man es in auf seine Seite einbinden will – inkl. 200$ monatlichem Guthaben, das den meisten kleinen Seiten wohl reichen wird.

Mir war das gar nicht bekannt und bin erst durch eine Internetrecherche darauf gestoßen, als ich immer wieder bemerkt hatte, das Kartenmaterial auf meiner Seite nicht richtig geladen wird und ein Wasserzeichen eingeblendet wird, mit dem Wortlaut „for development purpose only“ (in etwa „nur für Entwicklungsprojekte“ ). Komischerweise kam das Wasserzeichen und die Meldung nicht immer.

Google Maps: For Development Purpose Only

Google Maps: For Development Purpose Only

Nach etwas Internetrecherche bin ich dann auf den Hinweis gestoßen, dass man seit Juni 2018 eben Abrufkontingente bei Google Maps kaufen muss. Ist das Basiskontingent noch nicht ausgeschöpft kommt wohl die Meldung nicht. Hat man zu viele Anfragen, dann kommt die Meldung.

Keine Ahnung, ob meine Seite mit den ganzen Routen, Karten, Marker etc. wirklich so viele Abrufe hat, ich konnte den Fehler einfach nicht beseitigen (Stichwort API Key etc).

Kostenfreie, offene Alternative: OpenStreetMap (OSM)

Auf der Suche nach einer Alternative zu Google Maps, die man leicht in WordPress einbinden kann, bin ich recht schnell bei OpenStreetMap (OSM) gelandet. Seit Jahren ist OSM ein geniales Community-Projekt, das Geodaten offen und frei zur Verfügung stellt. Jeder kann sich dabei einbringen, die Karten genauer und aktuell zu halten.

Anders als bei Google Maps liefert OSM „nur“ die Geodaten, die wiederum von den verschiedensten Projekten genutzt werden um spezielle Karten zu erstellen. OSM selbst hat z.B. keine Höheninformationen (Topografie), die Abwandlung OpenTopoMap dagegen sehr wohl.

Einziger wirklicher Nachteil von OSM ist, dass es keine Satellitendaten gibt und man nicht ohne weiteres Routen erstellen kann.

Nachdem ich den Opensource-Welt sowieso sehr zugetan bin, habe ich mir also vorgenommen mich auf diesem Blog von Google Maps zu verabschieden und alle meine Karten in OSM-Karten zu migrieren.

Erster Schritt dazu ist die Installation des OSM-Wordpress-Plugins.

Anfangs hatte ich offen gesagt Probleme zu kapieren, wie ich eine Karte mit Markern erstelle. Hier ist das OSM-Plugin leider nicht sonderlich benutzerfreundlich. Will man viele Punkte auf einer oder mehreren Karten in einem Beitrag markieren hat man ein Problem: Man kann im Plugin selbst nur 9 Marker pro Beitrag anlegen, will man mehr, muss man über einen anderen Weg eine KML oder GPX Datei erstellen.

Also vorher gut überlegen, wie viele Marker man in eine Karte setzen will. Die erzeugten Marker müssen dann allerdings erneut aufgerufen werden, d.h. man muss wieder in der Karte rumzoomen und schieben, bis man am richtigen Ort ist, den Ausschnitt und den Marker auswählen und in die Karte klicken, wo der Mittelpunkt sein soll. Danach kriegt man einen Shortcode, den man in seinem Beitrag an gewünschter Stelle einfügen muss. Irgendwie arg umständlich, v.a. weil die Karte immer wieder auf ein Zentrum in Südfrankreich zentriert wird – wohl die Heimat der Entwickler? Nervig.

Irgendwann hat man es allerdings raus und man klickt wie ein Wilder durch die Karte. Hatte ja genug Übungsmaterial, ich durfte immer zig Karten von Google Maps auf OSM umstellen.

Nachdem das OSM Plugin auch KML und GPX einbinden kann, dachte ich: „Wunderbar, da nehme ich einfach die vorhandenen und gut ist’s„. Denkste. Geht nicht wirklich. Wieso? Keine Ahnung. Vielleicht das falsche Format der Google Maps KMLs? Ich weiß es nicht.

Übrigens ist auch das Einbinden von KML/GPX ein morts Theater hinsichtlich des Speicherortes der Dateien. Früher hatte ich auf meinem Webspace einfach einen Unterordner „kml“ in dem alle KMLs in entsprechenden Unterordnern ablagen. Keine Ahnung weshalb, das OSM Plugin kann damit nix anfangen. Ich habe denn einen Ordner im wp-content Upload-Ordner angelegt, wie von den Entwicklern vorgeschlagen. Evtl. muss man WordPress noch beibringen, dass auch KML und GPX Dateitypen sind, die benutzt werden dürfen – per htaccess oder per Plugin.

Von KML  zu GPX

Nach mehreren Versuchen, eine vorhandene Route per KML zu laden oder mit Tools zu mirgrieren, habe ich testweise eine GPX der Pluginmacher probiert. Siehe da: Geht. Wie also die KMLs in GPX umwandeln?

Geht eigentlich ganz easy mit einem OSM-Projekt, das erlaubt eigene Karten zu erstellen – ähnlich wie bei Google Maps. Das Projekt heißt uMap und ist eine klare Empfehlung!

uMap: OSM Karten erstellen

uMap: OSM Karten erstellen

Mit einem Klick oben rechts auf „Erstelle eine Karte“ geht’s auch schon los: OSM-Daten werden geladen und ihr könnt euch damit vertraut machen, z.B. einen Ausschnitt suchen.

uMap: Kartenausschnitt

uMap: Kartenausschnitt

Im rechten Seitenmenü klickt man dann auf den Pfeil nach oben für Upload. Hier wählt man dann die vorhandene KML-Datei aus und klickt „importieren“ . Danach seht ihr sofort den Routenverlauf, wie er in der KML hinterlegt ist.

uMap: KML Upload

uMap: KML Upload

uMap: Importierte Route

uMap: Importierte Route

Jetzt kann man sich spielen und die Beschriftung der Linien und Marker editieren. Die Form und Farbe wird vom OSM-Plugin danach übrigens ignoriert, also nicht zu viel Mühe geben 😉

Wenn man fertig ist, klickt man im rechten Seitenmenü auf das Zahnrad. Oben kann man seiner Karte einen sinnvollen Namen verpassen, ganz unten klickt man dann auf „Erweiterte Aktionen“ und dann auf „Herunterladen„. Im darauf folgenden Dialog wählt man gpx als Dateiformat aus und klickt auf „Daten herunterladen“ . So migriert man also relativ schnell vorhandene KML in brauchbare GPX-Daten.

uMap: Karten Export

uMap: Karten Export

uMap: Karten Export

uMap: Karten Export

GPX in OSM Plugin einbinden

Im nächsten Schritt muss man dann die erzeugten GPX-Daten auf den Webspace unter /wp-content/uploads/ hochladen. Im Plugin geht man auf den Reiter „Karten & GPX | KML“ und gibt unter Punkt 4 den richtigen Pfad zur GPX an, die geladen werden muss. Danach muss man den Kartenausschnitt unten auf den Bereich zentrieren und zoomen, in dem die Route verläuft. Klick ins Zentrum der zukünftigen Karte, Shortcode unten kopieren und in den Beitrag an passender Stelle einfügen, fertig. Wieso das Plugin nicht den richtigen Bereich für die Route selbst lädt und man vorher noch rumzoomen und schieben muss, keine Ahnung.

OSM WordPress Plugin: Kartenshortcut generieren.

OSM WordPress Plugin: Kartenshortcut generieren.

Am Ende erhält man dann eine – wie ich finde – sehr schöne interaktive Karte:

Fazit

Auch wenn mich die Bedienung des Plugins manchmal vor Rätseln stellte und es in der Usability verbessert werden sollte, ist das OSM Plugin für mich ein vollwertiger Google Maps Ersatz auf meiner Seite. Kostenlos, offen und frei!

Achja: Routen lassen sich übrigens mit dem OSM-Projekt OpenRouteService erstellen und auch exportieren.

Auch interessant:

Netzwerk im Neubau – Tipps zur Planung und U... Das Netzwerk im Neubau - gerne wird dieses Thema bei der Planung und der (Elektro-) Installation übersehen oder vernachlässigt. Dabei ist es heute ein...
Selfmade OPNsense Appliance Selfmade OPNsense Appliance  - In diesem Artikel möchte ich einen Einblick und eine kleine Bauanleitung liefern, wie ich mir auf Basis von OPNsense un...
Softproof mit ICC-Profilen in Darktable Softproof mit ICC-Profilen in Darktable Wer seine (digitalen) Fotos nicht nur für das Internet bzw. social Media (Facebook, Instagram, etc.) schießt ...
Scribus: Bild/Foto als Hintergrund von Buchstaben Meine Fotobücher bzw. Fotoprojekte erstelle ich recht gerne mit dem Opensource-Programm Scribus. Für ein aktuelles Fotobuch des letzten Urlaubs, habe ...
Nexus 5 – Mikrofon-Reparatur Seit etwa einem Monat habe ich mit meinem LG Nexus 5 das Problem, dass das Mikrofon defekt ist. Nachdem meine Garantie noch nicht abgelaufen war, eröf...
Monitorkalibrierung mit Datacolor Spyder 5 unter L... Monitorkalibrierung mit Datacolor Spyder 5 - Welcher (Hobby-) Fotograf kennt das Problem nicht: Ein zuvor in RAW geschossenes Fotos sieht nach der Bea...

Gründer und Betreiber von Imrazor.de

Von Beruf Elektroingenieur, in der Freizeit reisebegeisterter Hobbyfotograf mit großer Linux-Affinität.

Mehr über mich und diesen Blog: https://www.imrazor.de/about/

← Vorheriger Beitrag

Nächster Beitrag →

4 Kommentare

  1. Hallo Andreas!
    Danke für diesen informativen Beitrag. Ich habe auf meiner Seite umweltmobile.de auch Google-Karten eingebunden, die nun nicht mehr erscheinen, da wir die API noch nicht angepasst haben. Deine Hinweise sind aber eine gute Richtschnur, die wir sicher auch prüfen werden… Klasse,
    In dem Zusammenhang schaue ich mir gleich auch mal Deine Gesamtseite an… bin gespannt!
    Viele Grüße
    Dietmar

    • Hallo Dietmar,

      freut mich, dass dir mein Beitrag etwas weiterhelfen konnte 🙂
      Für mich passt OSM als Ersatz hervorragend, frei, offen und sehr gute Ergebnisse.

      Grüße
      Andreas

  2. Alles fein, fehlt nur etwas zur DSGVO bzw. GDPR.

    • Hallo Peter,
      mein Artikel zielt in erster Linie auf die technischen Aspekte des OSM Plugins ab. Wieso sollte ich dabei auf die DSGVO eingehen?
      Grundsätzlich ist es immer so, dass bei Verwendung von Drittanbieterinformationen (Kartendaten von OSM), Informationen (in diesem Fall die IP-Adresse des Clients) an den liefernden Drittanbieter (OSM) übermittelt werden.
      Anders wäre ein Laden der richtigen Kartenkacheln auch nicht möglich, die liegen ja nicht auf meinem Server.
      In den Datenschutzritchlinien sollte natürlich auf die Verwendung von OSM hingewiesen werden.

      Oder an was denkst du sonst noch?

      Grüße
      Andreas

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.