Sie benötigen eine interaktive Karte auf Ihrer WordPress-Website, und die standardmäßigen Google Maps reichen nicht aus? Eine gewöhnliche iframe-Karte bietet keine anklickbaren Regionen, Tooltips oder ein filterbares Objektverzeichnis. Und Ihr Kunde wünscht eine Karte mit Adresssuche und farbcodierten Regionen für statistische Auswertungen.

MapSVG ist eines der wenigen WordPress-Plugins, das all dies in einem Werkzeug vereint. Es wird von über 16.000 Websites genutzt, und die kostenlose Version auf WordPress.org ermöglicht es Ihnen, nahezu alle grundlegenden Funktionen kostenlos zu testen. Im Folgenden finden Sie eine detaillierte Aufschlüsselung der Funktionen, eine praktische Einrichtungsanleitung und ein ehrliches Urteil darüber, für wen dieses Plugin geeignet ist und wer sich nach Alternativen umsehen sollte.

💡 Kurzüberblick:

• Laden Sie eine fertige SVG-Karte aus der integrierten Bibliothek oder laden Sie Ihre eigene Datei hoch.
• Verknüpfen Sie Datenbankobjekte mit benutzerdefinierten Feldern mit Regionen.
• Konfigurieren Sie Tooltips und Popover-Fenster über den Vorlageneditor.
• Überlagern Sie bei Bedarf die Vektorkarte auf Google Maps.
• Fügen Sie den Shortcode auf einer Seite ein und prüfen Sie das Ergebnis.

Was MapSVG kann: eine Aufschlüsselung der Kernfunktionen

Das Plugin wird von Roman Stepanov (RomanCode auf WordPress.org) entwickelt. Das Projekt ist seit 2012 aktiv und erhält regelmäßige Updates: Stand Juni 2026 ist die Version 8.6.6 aktuell, mit mehreren Veröffentlichungen pro Monat laut Änderungsprotokoll. Dies ist relevant für ein Plugin, das mit der Google Maps API arbeitet, da Karten ohne regelmäßige Updates bei jeder API-Schlüssel-Änderung ausfallen.

Über 100 fertige, geokalibrierte Karten

Das Plugin wird mit einer Bibliothek von mehr als 100 geokalibrierten SVG-Karten ausgeliefert. Die Weltkarte ist bereits in anklickbare Länder unterteilt. Länderkarten mit Unterteilungen in Bundesstaaten, Provinzen und Regionen sind separat verfügbar. Es gibt auch einige Spezialkarten.

Geokalibrierung bedeutet, dass jeder Bereich der Karte mit realen Koordinaten verknüpft ist. Sie können Marker per Adresse oder Breiten-/Längengrad hinzufügen, und sie landen präzise auf der korrekten Region. Finden Sie die passende Karte nicht in der Bibliothek? Zeichnen Sie eine SVG in Inkscape oder Adobe Illustrator, laden Sie sie in MapSVG hoch, und das Plugin verwandelt Ihre Vektorgrafik in eine interaktive Karte mit anklickbaren Zonen.

Datenbankobjekte mit benutzerdefinierten Feldern

Diese Funktion hebt MapSVG von den meisten WordPress-Karten-Plugins ab. Sie erstellen Einträge (Objekte) in der integrierten Datenbank des Plugins mit beliebigen Feldern, die Sie benötigen: Text, Zahlen, Bilder, Kontrollkästchen, Dropdown-Listen. Anschließend verknüpfen Sie ein Objekt mit einer bestimmten Kartenregion.

Beispiel: Eine Immobilienagentur erstellt Objekte für Immobilien mit Adresse, Preis, Fläche und Fotos. Jedes Objekt ist mit einer Region auf der Karte verknüpft. Ein Besucher klickt auf einen Bereich und sieht die Immobilienkarte in einem ansprechenden Popup-Fenster, einer Detailansicht oder einem Tooltip. Kein externes Plugin für die Datenspeicherung nötig; alles bleibt innerhalb von MapSVG.

Verzeichnis mit Filterung und Suche

Datenbankobjekte können nicht nur auf der Karte, sondern auch als filterbares Verzeichnis daneben angezeigt werden. Wenn ein Nutzer eine Suchanfrage in die Suchleiste eingibt oder einen Wert aus einem Dropdown-Filter auswählt, aktualisieren sich Verzeichnis und Karte synchron. Ein Klick auf eine Kartenregion filtert das Verzeichnis und umgekehrt.

Die Premium-Versionen ergänzen Filter nach Kategorie, Postleitzahl und Datum. CSV-Import wird unterstützt, und ab der Plus-Stufe können Daten direkt aus Google Sheets bezogen werden (wenn sich die Quelle aktualisiert, aktualisiert sich die Karte automatisch).

Vektorkarten-Overlay auf Google Maps

Standardmäßige Google Maps per iframe bieten nahezu keine Anpassungsmöglichkeiten. MapSVG löst dieses Problem radikal: Sie legen Ihre eigene interaktive SVG-Ebene über Google Maps jeglichen Typs (Satellit, Gelände, Straßenkarte, Hybrid). Alles, was Sie benötigen, ist ein Google Maps API-Schlüssel.

Die Vektorebene ist vollständig anklickbar: Zonen, Marker und Tooltips funktionieren genauso wie auf einer regulären SVG-Karte. Das Ergebnis ist eine Karte, die wie Google Maps aussieht, sich aber wie eine vollständig individuelle Webanwendung verhält. Hervorhebung von Orientierungspunkten, interaktive Routen und Regionen sind allesamt konfigurierbar.

Integrierte CSS-, JavaScript- und Handlebars-Vorlageneditoren

Für diejenigen, die mit Code arbeiten, bietet MapSVG drei integrierte Editoren. Der CSS-Editor ermöglicht es Ihnen, Tooltip-Stile, Popup-Fenster und Markierungen anzupassen und die Ergebnisse in Echtzeit zu sehen. Der JavaScript-Editor erlaubt es, sich in Kartenereignisse (Klick auf eine Region, Hover) einzuklinken und Middleware-Logik zu schreiben. Der Handlebars-Template-Editor gibt Ihnen die volle Kontrolle über die HTML-Struktur von Tooltips, Popover-Fenstern und Detailansichten.

In der Praxis bedeutet das, dass eine Tooltip-Vorlage mit Foto, Preis und einem „Mehr erfahren"-Button in fünf Minuten erstellt werden kann. Und über JavaScript können Sie beispielsweise bei einem Klick auf eine Region eine AJAX-Anfrage senden und Daten dynamisch nachladen.

Bedienpanel mit Echtzeitvorschau

Die MapSVG-Oberfläche ist ein eigenständiges Panel innerhalb des WordPress-Administrationsbereichs. Die Kartenerstellung erfolgt schrittweise: Quelle wählen, Regionen, Farben und Tooltips konfigurieren, veröffentlichen. Alle Änderungen erscheinen sofort im Vorschaufenster; Sie müssen die Seite nicht speichern und neu laden, um die Ergebnisse zu sehen.

Die Navigation funktioniert über ein nach Abschnitten gegliedertes Dropdown-Menü (Regionen, Farben, Vorlagen, Einstellungen). Die Oberfläche mag für Einsteiger aufgrund der vielen Optionen zunächst überwältigend wirken, doch nach der ersten Stunde erschließt sich die Logik.

Karten aus Rasterbildern

MapSVG funktioniert nicht nur mit Vektor-SVGs, sondern auch mit gewöhnlichen PNG- und JPEG-Dateien. Integrierte Zeichenwerkzeuge erlauben es Ihnen, Flächen über einem Rasterbild nachzuzeichnen, die dann zu anklickbaren Zonen werden. Das eröffnet Szenarien, die Vektorkarten nicht abdecken können: interaktive Grundrisse, Sitzpläne, Baupläne, Routen und Stadtpläne.

Technisch gesehen fotografieren Sie einen Gebäudeplan, zeichnen Räume mit dem Werkzeug „Region zeichnen" nach, fügen Beschriftungen hinzu und erhalten einen interaktiven Plan, bei dem ein Klick auf einen Raum Informationen dazu anzeigt. Kunden aus der Event- und Immobilienbranche werden dies zu schätzen wissen.

Praktischer Leitfaden: Installation und Erstellung Ihrer ersten Karte

Die Installation von MapSVG unterscheidet sich nicht von der eines anderen WordPress-Plugins. Der Unterschied liegt im Prozess der Kartenerstellung: Sie benötigen mindestens einen Durchlauf durch das Menü, um die Interface-Logik zu verstehen. Danach läuft es reibungslos.

Schritt 1. Installation des Plugins

Laden Sie MapSVG von WordPress.org herunter (kostenlose Lite-Version) oder erwerben Sie die Premium-Version auf mapsvg.com. Anschließend im WordPress-Admin: Plugins → Installieren → Plugin hochladen.

Klicken Sie auf Hochladen (1), wählen Sie die ZIP-Datei des Plugins aus (2) und klicken Sie auf Jetzt installieren (3):

Warten Sie, bis die Installation abgeschlossen ist, und aktivieren Sie das Plugin:

Fertig. Im Admin-Seitenleistenmenü erscheint der Eintrag MapSVG; klicken Sie darauf.

Schritt 2. Erstellen einer Karte aus einer fertigen Vorlage

Auf dem Startbildschirm des MapSVG-Panels sehen Sie verschiedene Optionen: Wählen Sie eine fertige Karte, erstellen Sie eine Google-Karte (nach Eingabe eines API-Schlüssels), bauen Sie eine Image-Map, laden Sie Ihre eigene SVG-Datei hoch oder legen Sie eine SVG-Datei über Google Maps. Die Links Tutorials und Support oben im Panel führen zu Dokumentation und Support.

Wählen Sie Neue SVG-Karte und suchen Sie die gewünschte Karte in der Dropdown-Liste. Für dieses Beispiel verwenden wir die China-Karte, die in Provinzen unterteilt und vollständig einsatzbereit ist.

Auf dem nächsten Bildschirm geben Sie den Kartentitel ein. Hier können Sie auch Größe, Responsivität (standardmäßig aktiviert), Tooltips und Popup-Fenster konfigurieren. Die Regionen sind bereits anklickbar, und die Karte ist bereit zur individuellen Anpassung.

Schritt 3. Konfiguration der Farben

Gehen Sie zu Menü → Farben. Die Farbpalette ermöglicht es Ihnen, Farben für Regionen, Hintergrund, Konturen und Zustände (Hover, Aktiv) festzulegen. Es gibt keine Einschränkungen; wählen Sie beliebige Farbtöne.

Nachdem Sie die Farben festgelegt haben, klicken Sie auf Speichern Strg + S:

Die Karte wird im Vorschaufenster sofort umgefärbt. Wenige Klicks, und das Farbschema ist erledigt.

Schritt 4. Hinzufügen von Tooltips

Erstellen Sie eine Tooltip-Vorlage. Gehen Sie zu Menü → Vorlagen → Region-Tooltip. Der Handlebars-Vorlageneditor unterstützt den {{title}}-Tag, der den Regionsnamen ausgibt. Grundlegende Vorlage:

1
Region: <strong>{{title}}</strong>

Klicken Sie auf Speichern Strg + S. Aktivieren Sie anschließend die Tooltips: Menü → Einstellungen → Tooltips.

Wenn Sie nun mit der Maus über eine Region fahren, erscheint ein Tooltip mit ihrem Namen. Dies ist das grundlegende Szenario. Um Fotos, Preise und andere Daten in den Tooltip aufzunehmen, benötigen Sie benutzerdefinierte Felder.

Schritt 5. Benutzerdefinierte Felder über Datenbankobjekte

MapSVG ermöglicht es Ihnen, Regionen benutzerdefinierte Felder hinzuzufügen. Zu den Feldtypen gehören Text, Textarea, Checkbox, Bilder und andere. Lassen Sie uns ein Bildfeld erstellen.

Gehen Sie zu Menü → Regionen und klicken Sie auf Felder bearbeiten:

Klicken Sie auf die Schaltfläche Bild, um ein Feld vom Typ Bild hinzuzufügen, dann auf Felder speichern:

Vergessen Sie nicht, auf Speichern Strg + S zu klicken. Wechseln Sie dann zur Registerkarte Liste:

Aktivieren Sie den Modus Regionen bearbeiten und klicken Sie auf die gewünschte Region (zum Beispiel Nei Mongol). Auf der rechten Seite erscheint ein neues Feld Bilder. Klicken Sie auf Durchsuchen:

Fügen Sie Bilder über die WordPress-Mediathek hinzu und klicken Sie auf Bilder auswählen:

Das System leitet Sie zurück zum Bearbeitungsbildschirm der Region. Klicken Sie auf OK (1), dann auf Speichern Strg + S (2) und wechseln Sie zurück in den Vorschau-Modus (3):

Die Bilder sind hinzugefügt, erscheinen aber noch nicht im Tooltip; Sie müssen die Vorlage aktualisieren. Gehen Sie zu Menü → Vorlagen → Regionen-Tooltip und ersetzen Sie den Code:

1
Region: <strong>{{title}}</strong><br />
2
First image:<br />
3
<img src="{{images.0.thumbnail}}" width="40px" /><br /><br />
4
All images:<br />
5
{{#each images}}
6
    <img src="{{thumbnail}}" width="40px" />
7
{{/each}}

Speichern Sie die Vorlage. Wenn Sie nun mit der Maus über Nei Mongol fahren, zeigt der Tooltip die hochgeladenen Bilder an:

Schritt 6. Veröffentlichen der Karte auf Ihrer Website

Speichern Sie alle Änderungen. Gehen Sie zu Seiten → Neu erstellen und klicken Sie auf die Schaltfläche MapSVG oberhalb des Editors:

Wählen Sie die erstellte Karte aus der Liste aus, und das Plugin fügt den Shortcode [mapsvg id="17" title="China"] ein. Veröffentlichen Sie die Seite und prüfen Sie das Ergebnis im Frontend:

Die Karte ist vollständig responsiv; auf mobilen Geräten funktionieren Regionen und Tooltips ohne Funktionseinbußen. Der Shortcode kann in jeden Beitrag, jede Seite oder jedes Widget eingefügt werden, und die Karte wird korrekt geladen.

⁉️🤔 Häufig gestellte Fragen

Benötige ich einen Google Maps API-Schlüssel für MapSVG?

Nur, wenn Sie die Google-Maps-Ebene nutzen möchten. Für die Arbeit mit vorgefertigten SVG-Karten aus der Bibliothek und Ihren eigenen SVG-Dateien ist kein Schlüssel erforderlich. Falls Sie Google Maps benötigen, besorgen Sie sich einen API-Schlüssel in der Google Cloud Console und tragen Sie ihn in den Plugin-Einstellungen ein; der Vorgang dauert wenige Minuten.

Kann ich meine eigene SVG-Datei hochladen?

Ja. Zeichnen Sie eine Karte in Inkscape oder Adobe Illustrator, speichern Sie sie als SVG und laden Sie sie in MapSVG hoch. Das Plugin wandelt Vektorformen automatisch in anklickbare Regionen um. Wenn die Karte nicht geokalibriert ist, funktionieren Marker nach Adresse nicht; Sie müssen sie dann manuell platzieren.

Was ist der Unterschied zwischen der kostenpflichtigen und der kostenlosen Version?

Die kostenlose Lite-Version bietet Ihnen unbegrenzt viele Karten und Marker, Tooltips, Popover-Fenster und benutzerdefinierte Felder. Die kostenpflichtigen Stufen fügen schrittweise Funktionen hinzu: Starter (49 $/Jahr) bietet ein filterbares Verzeichnis und benutzerdefinierte Vorlagen; Plus (99 $/Jahr) ergänzt Google-Sheets-Integration, ACF und Metabox; Pro (199 $/Jahr) fügt Marker-Clustering und Frontend-Bearbeitung hinzu; Elite (299 $/Jahr) bietet REST-API und MySQL-Datenquellen. Es sind auch Lifetime-Lizenzen erhältlich, die von 99 $ bis 599 $ reichen.

Ist das Plugin für Nicht-Programmierer geeignet?

Eine einfache Karte mit Regionen und Tooltips lässt sich definitiv ohne Code erstellen; die Oberfläche ist visuell. Sobald Sie jedoch benutzerdefinierte Tooltip-Vorlagen (Handlebars) oder Styling (CSS) benötigen, sind minimale HTML-Kenntnisse hilfreich. Die Dokumentation unter mapsvg.com/docs ist mit Beispielen geschrieben, und der Support antwortet schnell.

Verlangsamen die Karten die Website?

Nein. Eine SVG-Karte ist eine Vektordatei, die Kilobyte wiegt, nicht Megabyte. Das Rendering erfolgt clientseitig per JavaScript. Bei einer großen Anzahl von Markern (Hunderte oder Tausende) empfehlen wir, Clustering zu aktivieren, das ab der Pro-Stufe verfügbar ist.

Wie steht es um Support und Updates?

Das Plugin wird mehrmals im Monat aktualisiert; das Changelog auf WordPress.org zeigt, dass der Entwickler aktiv Fehler behebt und Funktionen hinzufügt. Support ist über einen integrierten Chat direkt aus dem Admin-Panel verfügbar (nach der Aktivierung). Nutzer weisen in Bewertungen darauf hin, dass die Antworten schnell sind, aufgrund von Zeitzonenunterschieden kann eine Antwort jedoch einige Stunden dauern.

Lohnt sich der Kauf von MapSVG: abschließendes Urteil

MapSVG ist ein spezialisiertes Werkzeug, das herkömmliche Google-Maps-Plugins deutlich überragt, wenn Sie echte Interaktivität benötigen: anklickbare Regionen, filterbare Verzeichnisse und benutzerdefinierte Tooltips. Wenn Ihre Aufgabe „Karte für eine Wegbeschreibung einfügen" lautet, ist das Plugin überdimensioniert. Wenn Ihre Aufgabe eine Immobilienkarte, ein Filialfinder, interaktive Regionalstatistiken oder ein Sitzplan ist, gehört MapSVG zu den besten Optionen auf dem WordPress-Markt.

Die kostenlose Lite-Version deckt Szenarien ab, für die andere Plugins bereits Geld verlangen: unbegrenzt viele Karten und Marker, benutzerdefinierte Felder, Tooltips und Popover-Fenster. Das ist eine seltene Großzügigkeit für ein Freemium-Modell; Sie können ein Projekt ohne Budget starten und einen Plan erwerben, wenn Sie Filter, ein Verzeichnis oder eine Google-Sheets-Integration benötigen.

Unsere Erfahrung: Nach einem Abend mit der Dokumentation war eine China-Karte mit Tooltips und Bildern fertig. Ja, die Oberfläche ist auf den ersten Blick nicht intuitiv (viele Optionen und Menüs), aber die Lernkurve ist kurz. Die integrierten CSS-/JS-/Handlebars-Editoren sind ein Geschenk des Himmels für Entwickler: Sie müssen nicht in Theme-Dateien herumwühlen.

Wenn Sie ein WordPress-Karten-Plugin suchen und nicht schon nach einem Monat an die Grenzen der kostenlosen Version stoßen möchten, beginnen Sie mit MapSVG Lite auf WordPress.org. Und falls Sie eine Alternative benötigen, werfen Sie einen Blick auf unsere Übersicht zu WordPress-Karten-Plugins, in der wir ein Dutzend Optionen für verschiedene Anwendungsfälle verglichen haben.