// f-01marker
Standort-Marker.
Ein Standort, ein Pin — im Design deiner Marke statt im Standard-Rot. Ein Klick öffnet ein Info-Fenster mit Adresse, Öffnungszeiten und Kontakt, ohne die Seite zu verlassen.
output: pin + info-fenster
// komponente · maps
Karten & Standorte.
Karten & Standorte ist bei siteway eine Komponente — ein Baustein, den wir in deine Website einbauen. Wir binden die Karte über die Google-Maps-API ein, nicht als fertiges Fremd-Widget: Marker und Cluster, Umkreis- und Händlersuche, Route — und ein Kartenbild, das zu deinem Design passt. Wo es eine eigene Kartensprache braucht, bauen wir mit Mapbox.
komponente
baustein: einzeln buchbar
technik: google maps api · mapbox
output: karte + umkreissuche
// definition
Was ist eine Standortkarte als Komponente?
Eine Standortkarte als Website-Komponente ist eine interaktive Karte, die über die Google-Maps-API in deine Website eingebaut wird — nicht als fertiges Widget von außen. Sie zeigt deine Standorte als Marker, bündelt viele Punkte zu Clustern, findet über eine Umkreissuche den nächsten Standort und führt Besucher per Route dorthin.
Der Unterschied zum eingebetteten Kartenschnipsel: Über die API bestimmen wir, was geladen wird, wie es aussieht und was passiert, wenn jemand auf einen Pin klickt. Die Karte ist Teil deiner Website — mit deinen Farben, deinen Daten und deinem Verhalten, statt einer fremden Box im Layout.
// warum
Eingebaut statt eingebettet.
api statt widget
Ein eingebettetes Karten-Widget ist eine fremde Box in deinem Layout: Du bekommst das Design, das der Anbieter vorsieht, die Interaktion, die er erlaubt, und keine Kontrolle darüber, was geladen wird. Sobald mehr gefragt ist als ein Pin — mehrere Standorte, eine Händlersuche, ein Klick, der etwas auf der Seite auslöst — ist das Widget am Ende.
Deshalb arbeiten wir grundsätzlich mit der Google-Maps-API statt mit einem iframe-Schnipsel. Die Karte wird damit ein Teil der Website: Wir steuern das Kartenbild, die Marker, die Suche und jede Interaktion — und die Standortdaten kommen aus deinem CMS, nicht aus einem fremden Backend.
Und der Datenschutz? Ist bei einer sauberen API-Einbindung kein Hindernis. Es lädt kein fremdes Widget mit, das beim Seitenaufruf Besucherdaten irgendwohin schickt — wir bestimmen, was geladen wird und wann.
// baustein · 6 funktionen
Was die Komponente kann.
vom pin bis zur händlersuche
// f-02netz
Mehrere Standorte & Cluster.
Bei vielen Standorten fasst die Karte nahe Punkte zoomabhängig zu Clustern zusammen und löst sie beim Hineinzoomen wieder auf. Aus hunderten Pins wird so ein lesbares Bild statt eines Nadelkissens.
output: clustering
// f-03suche
Umkreis- & Händlersuche.
Besucher geben Postleitzahl oder Ort ein und sehen die nächstgelegenen Standorte, sortiert nach Entfernung — mit Filtern nach Typ, Leistung oder Sortiment. Genau das läuft bei der Spelsberg-Großhändlersuche.
output: plz-suche + entfernung
// f-04route
Route & Anfahrt.
Ein Klick startet die Route zum Standort — im Browser oder direkt in der Karten-App auf dem Handy. Für Filialen und Werke der kürzeste Weg von „gefunden" zu „angekommen".
output: routing
// f-05design
Karten-Design.
Farben, Beschriftung, Straßen, Wasser, Kontrast — das Kartenbild wird über Map-Styling an dein Design angepasst, hell wie dunkel. Die Karte fügt sich ein, statt aus der Seite herauszustechen.
output: map-style
// f-06daten
Standorte aus dem CMS.
Deine Redaktion pflegt Standorte wie jeden anderen Inhalt — Adresse eintragen, Koordinaten holen wir per Geocoding automatisch. Bei großen Netzen können die Daten auch aus deinem System kommen.
output: cms + geocoding
// belege
Vom Pin zum Karten-Portal.
zwei projekte, zwei ausbaustufen
Die Komponente skaliert. Sie fängt beim einzelnen Standort an — und hört bei einem interaktiven Karten-Portal auf, das eine Firmengeschichte erzählt. Zwei Projekte aus unserer Werkstatt zeigen die Spannweite.
// stufe 01 · händlersuche
Hunderte Händler, ein Suchfeld.
Für Spelsberg haben wir die Großhändlersuche gebaut: Der Kunde gibt Firmennamen, Postleitzahl oder Ort ein und findet den nächsten Händler. Über ganz Europa verteilt fasst die Karte die Standorte zu Clustern zusammen — die Zahl im Pin zeigt, wie viele Händler dahinterstecken. Beim Hineinzoomen lösen sie sich in einzelne Adressen auf.
Zum Spelsberg-Case →
// stufe 02 · karten-portal
Hinter jedem Pin eine Geschichte.
Zum 60-jährigen Jubiläum hat GARBE seine Geschichte auf die Landkarte gebracht. garbe.world ist keine Standortliste, sondern ein interaktives Karten-Portal: Über mindestens sechs Zoomstufen reist man von Europa bis nach Hamburg, jeder Pin öffnet ein Overlay aus Bild, Video und Text — direkt verlinkbar und teilbar.
Weil das Projekt eine eigene Kartensprache brauchte, haben wir es auf Mapbox und OpenStreetMap gebaut statt auf der Standard-Karte. Genau dafür ist die Wahl der Technik da: Google Maps, wo es um Standorte und Suche geht — Mapbox, wo die Karte selbst zum Erlebnis wird.
Zum GARBE-Case →// einbau · 4 schritte
So bauen wir den Baustein ein.
in deine seite · nicht daneben
-
// schritt 01 · standorte
Standortdaten klären.
Ein Standort oder ein Netz? Welche Felder je Marker — Adresse, Öffnungszeiten, Telefon, Route? Wir legen fest, was die Karte zeigt und woher die Daten kommen.
output: standort-schema
-
// schritt 02 · karte
Karte aufbauen.
Wir binden die Karte über die Google-Maps-API ein und stylen sie im Look deiner Website — mit Markern, Clustern, Popups und, falls nötig, Umkreissuche. Braucht das Projekt eine eigene Kartensprache, bauen wir mit Mapbox.
output: tracking-freie karte
-
// schritt 03 · cms
Ins CMS einbauen.
Standorte pflegst du künftig selbst im Backend — TYPO3, WordPress oder Statamic. Neue Filiale anlegen, sie erscheint auf der Karte und in der Liste, ohne dass jemand Code anfasst.
output: backend-pflege
-
// schritt 04 · datenschutz ● ergebnis
Datenschutz dokumentieren.
Wir halten fest, welche Daten die Karte verarbeitet und was in die Datenschutzerklärung gehört — als fertigen Textbaustein, den du übernehmen kannst.
output: live-karte
// faq
Häufige Fragen.
Welche Karten-Technik nutzt ihr?
In der Regel die Google-Maps-API — sie liefert das dichteste Adress- und Routing-Material und ist für Standortkarten, Umkreissuche und Anfahrt die pragmatische Wahl. Wenn ein Projekt eine eigene Kartensprache braucht, bauen wir mit Mapbox und OpenStreetMap, wie beim Karten-Portal garbe.world. Fest steht in beiden Fällen: Wir binden über die API ein, nicht über ein fertiges Fremd-Widget.
Warum bindet ihr Karten über die API ein statt als Widget?
Weil ein eingebettetes Widget eine fremde Box in deinem Layout ist: vorgegebenes Design, keine eigene Suche, kein Klick, der etwas auf der Seite auslöst. Über die API gehört die Karte zur Website — wir steuern Kartenbild, Marker, Cluster und jede Interaktion, und die Standortdaten kommen aus deinem CMS.
Ist die Karte datenschutzkonform?
Ja. Über die API-Einbindung lädt kein fremdes Widget mit, das beim Seitenaufruf ungefragt Besucherdaten abzieht — wir bestimmen, was geladen wird und wann. Datenschutz ist damit kein Hindernis, sondern eine Frage der sauberen Umsetzung.
Kann die Karte mehrere Standorte und eine Umkreissuche zeigen?
Ja, genau dafür ist sie gebaut. Viele Standorte werden zoomabhängig zu Clustern gebündelt, die sich beim Hineinzoomen auflösen. Über eine Umkreissuche geben Besucher Postleitzahl oder Ort ein und sehen die nächstgelegenen Standorte, sortiert nach Entfernung — wie bei der Spelsberg-Großhändlersuche.
Können wir die Karte im Look unserer Marke gestalten?
Ja. Farben, Beschriftung, Straßen, Wasser und Kontrast lassen sich über Map-Styling an dein Design anpassen, in hell und dunkel. Die Karte fügt sich damit ins Layout ein, statt als Fremdkörper herauszustechen.
Woher kommen die Standortdaten?
Aus deinem CMS: Deine Redaktion pflegt Standorte wie jeden anderen Inhalt, die Koordinaten holen wir per Geocoding automatisch aus der Adresse. Bei großen Netzen können die Daten auch aus einem angebundenen System kommen.
Können wir die Karten-Komponente einzeln buchen?
Ja. Karten & Standorte ist eine modulare Komponente, kein Gesamtpaket. Du buchst sie einzeln über das Paket „Komponenten" oder nimmst sie als Teil einer kompletten Website mit. Festpreis nach Briefing.
// passt dazu
Passt dazu.
bausteine & leistungen
// leistung · sichtbarkeit
SEO & GEO.
Die Karte zeigt den Weg — SEO & GEO sorgt dafür, dass du bei „in der Nähe" überhaupt gefunden wirst. Die andere Hälfte lokaler Sichtbarkeit.
weiterlesen →
// leistung · schema
Strukturierte Daten.
Jeder Standort als LocalBusiness mit Geo-Koordinaten und Öffnungszeiten — maschinenlesbar für Google und KI-Systeme.
weiterlesen →
// komponente · search
Suche.
Die Schwester-Komponente aus derselben Gruppe: Volltextsuche über die ganze Seite — auch tracking-frei, wie die Umkreissuche der Karte.
weiterlesen →
// Karte in deine Website einbauen?
Briefing starten