Interaktive Karte erstellen – für deine Website, kostenlos
Eine Karte, in die man hineinzoomen kann, mit deinen Orten, Popups, Liefergebieten oder Wanderrouten. Hier steht, welche Werkzeuge es dafür gibt und wie du so eine Karte in WordPress Schritt für Schritt baust.
- Ohne eigene Website: Google My Maps oder uMap (auf OpenStreetMap-Basis) reichen für eine Karte zum Teilen.
- Für deine WordPress-Website: ein Karten-Plugin, damit die Karte zu deiner Seite gehört und zu deinem Design passt.
- Mit Map Studio gestaltest du die Karte direkt auf der Karte, kostenlos und ohne API-Key.
Was eine interaktive Karte ausmacht
- Zoomen und verschieben statt eines festen Bildes.
- Eigene Orte mit Icon und Farbe, die man anklicken kann.
- Popups mit Text, Fotos, Öffnungszeiten und einem Knopf zur Route.
- Flächen und Linien: Liefergebiet, Einzugsgebiet, Festivalgelände, Wanderroute.
- Eine Liste mit Suche und Filter, damit man auch ohne Karte findet, was man sucht.
Welches Werkzeug wofür?
| Werkzeug | Gut für | Grenzen |
|---|---|---|
| Google My Maps | Schnell eine Karte mit Punkten und Linien zum Teilen | Google-Konto, kaum eigenes Aussehen, auf der Website Daten an Google |
| uMap | Freie OpenStreetMap-Karten im Browser, zum Teilen und Einbetten | Läuft auf fremden Servern, eingebettet per iframe |
| Map Studio (WordPress) | Karten, die zu deiner Website gehören: eigenes Aussehen, Liste, Filialfinder, Datenschutz-Optionen | Nur für WordPress |
Schritt für Schritt in WordPress
- Map Studio installieren. In WordPress unter Plugins → Installieren nach „Devenzi Map Studio“ suchen und aktivieren. Konto und Schlüssel sind nicht nötig.
- Neue Karte anlegen. Map Studio → Neue Karte. Starte leer oder mit einer Vorlage: Filialfinder, Liefergebiet, Wanderroute oder Lageplan für ein Event.
- Orte setzen. Adresse eintippen (mit Vorschlägen beim Tippen), auf die Karte klicken oder eine Tabelle importieren. Klickst du ein Café oder eine Haltestelle der Karte an, wird daraus mit einem Klick ein Ort, mit passendem Icon.
- Gestalten. 66 Icons, eigene Farben, Pin-Formen und Popups, die sich beim Klick, beim Darüberfahren oder dauerhaft öffnen. Dazu Fotos, Text und Öffnungszeiten.
- Flächen und Routen zeichnen. Eine Fläche zeichnest du wie in Google Maps, mit Flächen- und Umfangsangabe. Routen folgen auf Wunsch echten Straßen und Wegen, zu Fuß, mit dem Rad oder mit dem Auto.
- Aussehen wählen. Einer von sechs Kartenstilen, deine Markenfarbe, 3D-Gebäude beim Neigen.
- Einbinden. Per Block, Elementor-Widget oder Shortcode. Änderst du die Karte später, ändert sie sich überall, wo sie eingebunden ist.
Ideen für interaktive Karten
- Anfahrt zur Praxis, zum Büro oder zum Laden, mit Parkplätzen und Haltestellen.
- Filialfinder mit Liste, Suche und „In meiner Nähe“.
- Liefergebiet eines Restaurants oder Handwerksbetriebs als Fläche.
- Wanderroute oder Stadtspaziergang mit Stationen.
- Lageplan für ein Fest, eine Messe oder einen Campus.
- Projektkarte mit Referenzen, Immobilien oder Veranstaltungsorten.
Häufige Fragen
Ist das wirklich kostenlos?
Ja. Map Studio und der Kartendienst OpenFreeMap kosten nichts, es gibt keinen API-Key und kein Konto. Die Pro-Version bringt Extras wie eigene Kartendaten auf deinem Server, GPX-Routen mit Höhenprofil und Story-Karten.
Kann ich die Karte ohne WordPress nutzen?
Map Studio ist ein WordPress-Plugin. Ohne WordPress sind Google My Maps oder uMap einfache Wege, eine Karte zu erstellen und per iframe einzubetten.
Funktioniert die Karte auf dem Handy?
Ja. Die Karte passt sich der Breite an, Popups bleiben im Bild, und die Liste der Orte steht wahlweise neben oder unter der Karte. In der Vorschau des Editors siehst du Computer, Tablet und Handy.
Und der Datenschutz?
Die Kartenbilder kommen von OpenFreeMap, an Google geht nichts. Ohne Cookie-Tool schaltest du Laden nach Klick ein. Mehr dazu im Ratgeber Google Maps DSGVO-konform.
Deine interaktive Karte – gratis
Map Studio steht kostenlos im WordPress-Verzeichnis. Installiere es und bau deine erste Karte, ein Konto oder einen API-Key brauchst du dafür nicht.