Wenn Sie jemals versucht haben, benutzerdefinierte Kartenmarkierungen zu einer Verzeichnis-Website, einer Leaflet-Karte oder einem Mapbox-Dashboard hinzuzufügen, kennen Sie das Problem bereits.
Die Standardmarkierungen sehen generisch aus.
Wenn Sie jemals versucht haben, benutzerdefinierte Kartenmarkierungen zu einer Verzeichnis-Website, einer Leaflet-Karte oder einem Mapbox-Dashboard hinzuzufügen, kennen Sie die Schleife.
Die Standardmarkierungen sehen generisch aus. Bestehende kostenlose Tools decken meist nur eine Icon-Bibliothek ab (meistens Font Awesome) und geben nur PNGs aus.
Sobald Sie eine Markierung benötigen, die ein Lucide-Icon verwendet, Ihre Markenfarben exakt trifft oder als sauberes SVG ausgegeben wird, das Sie per CSS umfärben können, landen Sie wieder in Illustrator oder fügen SVG-Pfade in ein CodePen ein..
Wir entwickeln GeoDirectory seit über 12 Jahren, und benutzerdefinierte Kartenmarkierungen tauchen jede Woche in Support-Tickets auf.
Also haben wir das Tool gebaut, das wir uns gewünscht hätten: MapMarker Studio.
Es ist kostenlos, browserbasiert, erfordert keine Anmeldung, enthält über 40.000 Icons, ermöglicht das Herunterladen pixelgenauer Kartenmarkierungen als SVG oder PNG und gibt einfügefertigen Code für alle gängigen Kartierungsplattformen aus.
Dieser Beitrag ist der vollständige Leitfaden zur Erstellung benutzerdefinierter Kartenmarkierungen.
Was sie sind, warum die Standardwerte nicht ausreichen, wie man gute gestaltet und wie man sie tatsächlich in die Karte integriert.
Was ist ein benutzerdefinierter Kartenmarker?
Ein Kartenmarker ist das visuelle Element, das einen Standort auf einer Karte kennzeichnet.
Jede Kartierungsplattform wird mit einem Standard ausgeliefert.
Google Maps hat seinen roten Tropfen, Leaflet eine blaue Nadel und Mapbox verwendet einen Kreis.
Sie funktionieren, aber sie sind nicht einprägsam.
Wenn Sie mehr als einen Standorttyp auf einer Karte haben (Restaurants vs. Hotels, geöffnet vs. geschlossen, kostenlos vs. kostenpflichtig), benötigen Sie eine visuelle Unterscheidung, die die Standardwerte nicht bieten.
Ein benutzerdefinierter Kartenmarker ist jeder Marker, den Sie selbst gestaltet oder angepasst haben.
Andere Form, andere Farbe, ein Symbol darin, eine Beschriftung, ein Schatten – was auch immer den Nutzern hilft, die Karte schneller zu erfassen.
Es gibt drei Kategorien, die es sich zu kennen lohnt.
Bildbasierte Marker sind PNG- oder SVG-Dateien, die an bestimmten Koordinaten auf der Karte platziert werden.
Einfach, universell, überall unterstützt. Der Nachteil ist, dass PNG auf Retina-Displays nicht scharf skaliert, es sei denn, Sie verwenden SVG, und Farbänderungen erfordern einen neuen Export.
Symbol- oder Icon-Marker sind Vektorformen, die von der Kartierungsbibliothek selbst gezeichnet und per Code gestaltet werden.
Bei jedem Zoomlevel scharf, einfach im Handumdrehen umzufärben. Nativ in Bibliotheken wie Mapbox GL und Leaflet (über Plugins).
HTML-Marker verwenden ein vollständiges HTML-Element als Marker. Nützlich für Cluster, Info-Badges und animierte Pins.
Flexibler, aber beim Rendern im großen Maßstab rechenintensiver.
Für 90 % der Anwendungsfälle in Verzeichnissen und Dashboards sind SVG-Bildmarker die richtige Wahl. Scharf, leichtgewichtig, Farben leicht austauschbar und auf jeder Plattform einsetzbar.
Warum die Standard-Marker nicht ausreichen
Drei Gründe, warum Nutzer letztlich benutzerdefinierte Marker benötigen.
Mehrere Kategorien auf einer Karte. Wenn Ihre Karte Restaurants, Hotels und Tankstellen anzeigt, benötigen Sie drei visuell unterschiedliche Marker. Gleiche Form mit verschiedenen Icons oder gleiches Icon mit verschiedenen Farben. Die Standards bieten Ihnen nur einen.
Markenkonsistenz. Ein SaaS-Dashboard mit neutralen Grautönen und einer einzigen Akzentfarbe sollte keine rote Google-Nadel aufweisen, die heraussticht. Der Marker ist Teil der Benutzeroberfläche.
Informationsdichte. Sofern Sie keine Marker Cluster extensionverwenden, benötigt eine Karte mit 200 Markern einfachere, kleinere Marker als eine Karte mit 8. Der Standard ist für „moderate Dichte
Was einen guten Kartenmarker ausmacht
Jahre des Kartenerstellens für WordPress-Websites haben uns ein paar Regeln gelehrt. Keine davon ist überraschend. Die meisten vorhandenen Tools ignorieren sie trotzdem.
Auch in kleiner Größe gut erkennbar. Die meisten Marker werden mit 24 bis 32 Pixeln angezeigt. Wenn Ihr Symbol in dieser Größe unleserlich ist, funktioniert der Marker nicht. Testen Sie es, indem Sie die Augen zusammenkneifen.
Hoher Kontrast zur Karte. Helle Marker auf hellen Kartenkacheln verschwinden. Wählen Sie eine Füllfarbe und einen kontrastierenden Rand, damit der Marker auf Satelliten-, Straßen- und Dark-Themes gut erkennbar ist.
Eine klare Formsilhouette. Die Tropfenform ist aus gutem Grund ikonisch. Sie hat eine klare „Spitze", die auf den Standort zeigt. Kreise, Quadrate und Sechsecke funktionieren gut – aber ein Marker ohne klaren Ankerpunkt kann dazu führen, dass Nutzer falsch einschätzen, auf welchen Punkt der Karte er sich bezieht.
Symbol innerhalb des Markers, nicht daneben. Marker, bei denen das Symbol außen liegt (Label-Stil), überladen die Karte. Halten Sie die Bedeutung innerhalb der Silhouette.
Maximal drei Farben. Marker, Symbol und ein Akzent. Darüber hinaus wirkt der Marker in kleinen Größen überladen.
Die 8 Marker-Formen, die 95 % der Anwendungsfälle abdecken
Wir haben Dutzende von Marker-Silhouetten an echten GeoDirectory-Karten getestet. Diese acht decken nahezu alles ab.
- Pin (klassische Tränenform). Der ikonische Google Maps-Pin. Der beste Standard.
- Kreis. Minimalistisch, modern. Ideal für dichte Karten.
- Abgerundetes Quadrat. Material-Design-Feeling. Passt zu App-artigen Benutzeroberflächen.
- Quadrat. Scharf, technisch. Passt zu Architektur- oder Daten-Dashboards.
- Flagge. Ziel- und Ziellinie-Feeling. Gut für Veranstaltungen und Start-/Endpunkte.
- Schild. Sicherheit, Schutz, Offizielles. Gut für Rettungsdienste oder verifizierte Einträge.
- Sechseck. Trendy in Tech und Datenvisualisierung. Gut für moderne Dashboards.
- Sprechblase. Bewertungs- und Chat-ähnliche Kontexte. Gut für Testimonials oder Kommentarmarkierungen.
MapMarker Studio enthält alle acht als Ausgangspunkte.
Das richtige Icon wählen
Das Icon im Marker trägt die Bedeutung. Wähle das falsche Icon, und selbst ein wunderschön gestalteter Marker verfehlt seinen Zweck. Ein paar Richtlinien.
Verwende eine einheitliche Icon-Bibliothek auf deiner Karte. Das Mischen von Font Awesome, Lucide und eigenen SVGs erzeugt visuelles Rauschen. Entscheide dich für eine Bibliothek und bleib dabei.
Passe den Icon-Stil zum Marker-Stil. Umrandete Icons für umrandete Marker, gefüllte Icons für gefüllte Marker. Stilkonsistenz ist wichtiger als die Wahl der Bibliothek.
Vermeide Icons mit dünnen Linien. Ein 1px-Strich verschwindet in Marker-Größe. Wähle Icons mit einer Stärke von 1,5px oder mehr, oder Bibliotheken, die mehrere Stärken anbieten (Phosphor ist dafür ideal).
MapMarker Studio bündelt 14 der besten Icon-Bibliotheken: Lucide, Phosphor, Tabler, Font Awesome, Heroicons, Material Symbols, Iconoir, Remix, Boxicons, Bootstrap Icons, Mage, Octicons, Radix und Simple Icons (für Markenlogos wie Airbnb, Starbucks und TripAdvisor).
Über 40.000 Icons insgesamt. Alle kostenlos für die kommerzielle Nutzung.
So fügst du deiner Karte eigene Marker hinzu
Der genaue Code hängt von deiner Plattform ab. Hier erfährst du, wie es bei den gängigsten funktioniert – einschließlich der Stellen, die meistens für Verwirrung sorgen.
Leaflet
const customIcon = L.icon({ iconUrl: 'https://your-cdn.com/marker.svg', iconSize: [32, 40], iconAnchor: [16, 40], // tip of the marker popupAnchor: [0, -40] }); L.marker([40.7128, -74.0060], { icon: customIcon }).addTo(map);
Der Stolperstein:
iconAnchorMapbox GL JS
const el = document.createElement('div'); el.style.backgroundImage = 'url(https://your-cdn.com/marker.svg)'; el.style.width = '32px'; el.style.height = '40px'; el.style.backgroundSize = 'contain'; new mapboxgl.Marker(el) .setLngLat([-74.0060, 40.7128]) .addTo(map);
Der Stolperstein: Mapbox verwendet die
[lng, lat][lat, lng]Google Maps
new google.maps.Marker({ position: { lat: 40.7128, lng: -74.0060 }, map: map, icon: { url: 'https://your-cdn.com/marker.svg', scaledSize: new google.maps.Size(32, 40), anchor: new google.maps.Point(16, 40) } });
Der Stolperstein: Google Maps cached Icon-URLs aggressiv. Wenn du Änderungen an derselben SVG-URL testest, hänge einen
?v=2GeoDirectory
Für GeoDirectory-Nutzer kommen eigene Marker unter Kategorien → Kategorie bearbeiten → Standard-Kategorie-Icon. Lade die SVG- oder PNG-Datei hoch, und GeoDirectory verwendet sie automatisch für alle Einträge in dieser Kategorie.
Image URL: https://your-cdn.com/restaurant-marker.svg Recommended size: 36×46 px
MapMarker Studio exportiert eine GeoDirectory-kompatible SVG-Datei mit den richtigen Abmessungen und dem richtigen Ankerpunkt. Einfach einfügen – fertig.
Einmal gestalten, überall exportieren
Der Grund, warum wir MapMarker Studio gebaut haben, ist genau diese Schleife: Du gestaltest einen Marker in Figma, exportierst ein SVG, schreibst die Leaflet-Konfiguration aus dem Gedächtnis (und vertippst dich beim iconAnchor beim ersten Mal), testest, korrigierst, veröffentlichst. Und das für jede Kategorie auf deiner Karte.
Das Tool reduziert diese Schleife auf vier Schritte.
- Eine Form wählen (8 Optionen).
- Ein Icon wählen (40.000+ aus 14 Bibliotheken).
- Farben wählen.
- Sofort einsatzbereiter Code für Leaflet, Mapbox und Google Maps. Oder SVG/PNG direkt herunterladen – für die meisten WordPress-Mapping- und Verzeichnis-Plugins.
Alles läuft in deinem Browser. Keine Anmeldung. Kein Upload auf einen Server. Kostenlos.
MapMarker Studio ausprobieren →
Ein Hinweis zum Dateiformat
Wenn du nur eine Sache aus diesem Leitfaden mitnimmst: Verwende SVG. PNG ist als Fallback akzeptabel, wenn deine Plattform SVG wirklich nicht unterstützt – aber das ist 2026 selten der Fall.
SVG bleibt auf jeder Zoomstufe scharf, hat kleinere Dateigrößen bei typischer Marker-Komplexität und unterstützt das Umfärben per CSS-Variable. PNG verliert auf Retina-Bildschirmen an Qualität, sofern keine 2×- und 3×-Varianten mitgeliefert werden.
Die einzige Ausnahme betrifft die Performance bei extremen Maßstäben. Karten mit 1.000 oder mehr gleichzeitigen Markern können mit PNG geringfügig schneller dargestellt werden. Für alles unterhalb dieser Schwelle ist SVG die richtige Wahl.
Fazit
Benutzerdefinierte Karten-Marker gehören zu jenen Aufgaben, die nach 10 Minuten Arbeit aussehen, am Ende aber zwei Stunden dauern. Der größte Teil des Aufwands steckt in den Werkzeugen.
Jede bestehende Lösung ist entweder zu eingeschränkt, zu teuer oder zu generisch.
Wir haben MapMarker Studio entwickelt, weil wir selbst dutzende Male bei GeoDirectory-Installationen an dieser Wand standen.
Es ist kostenlos, bleibt kostenlos und funktioniert mit jeder Mapping-Plattform, die wir uns vorstellen konnten.
Wenn du einen Anwendungsfall findest, den es nicht abdeckt, lass es uns bitte wissen. Das Tool wird besser, wenn du es tust.