Zurück zu allen Beiträgen

Interaktive Standortkarte mit Mapbox und dem Webflow CMS

Hat Ihr Unternehmen mehrere Standorte, etwa Filialen oder Abholstellen, braucht Ihre Website eine interaktive und benutzerfreundliche Karte.

Endrit Mangjolli

·

·

Web Design

Interaktive Karte mit Mapbox auf einer Webflow-Website

Autor

Endrit Mangjolli, Co-Founder of Michelangelo Digital Media

Endrit Mangjolli

Mitgründer von Michelangelo Digital Media

Hat Ihr Unternehmen mehrere Standorte, etwa Filialen, Abholstellen, Geldautomaten, Showrooms oder Servicestellen, reicht eine eingebettete Google-Maps-Karte oder eine Adressliste auf der Website nicht aus. Sie brauchen eine interaktive, benutzerfreundliche Karte, die Ihr Team ohne eine einzige Zeile Code aktualisieren kann.

In diesem Beitrag zeigen wir, wie wir genau das umgesetzt haben, indem wir das Webflow CMS mit Mapbox verbunden haben: eine vollständig dynamische Standortkarte, bei der sich jedes Detail direkt im Webflow-Editor pflegen lässt.

Das Problem mit herkömmlichen Kartenlösungen

Die meisten Unternehmen mit mehreren Standorten landen bei einer statisch eingebetteten Google-Maps-Karte, die sich weder anpassen noch um neue Standorte erweitern lässt.

Die Alternative ist eine fest programmierte Liste von Koordinaten irgendwo im Custom Code der Website: Sie funktioniert, wird aber zum Wartungsalbtraum, sobald ein neuer Standort dazukommt oder sich die Öffnungszeiten ändern.

Keine der beiden Varianten ist skalierbar oder gibt dem Kunden bei Änderungen die Kontrolle.

Unsere Lösung: Webflow CMS + Mapbox

Mapbox ist eine professionelle Kartenplattform, die unter anderem von Greenpeace, BNP Paribas und der New York Times genutzt wird. Anders als Google Maps gibt Ihnen Mapbox die volle Kontrolle über Kartenstil, Marker-Design, Pop-up-Verhalten und Interaktionslogik.

In Verbindung mit dem Webflow CMS entsteht eine Karte, die Sie nach der Einrichtung vollständig im Webflow-Editor verwalten. Ohne Code und ohne Abhängigkeit von Entwicklern.

So funktioniert es.

So ist das CMS aufgebaut

Jeder Standort ist ein Eintrag in einer CMS Collection in Webflow. Für jeden Standort legen Sie Felder für die wichtigsten Daten an, die die Karte braucht:

  • Name: der angezeigte Name des Standorts

  • Breiten- und Längengrad: die Koordinaten (einfach aus Google Maps zu übernehmen)

  • Kategorie: die Art des Standorts, die die Farbe des Markers bestimmt

  • Öffnungszeiten: werden im Pop-up angezeigt

  • Öffentlich oder privat: ein Schalter, der im Pop-up ein sichtbares Badge einblendet

  • Optionale Felder: Adresse, Telefonnummer, Link zur Routenplanung in Google Maps

Sobald die CMS Collection eingerichtet ist, liest die Karte diese Felder automatisch aus. Fügen Sie im CMS einen neuen Standort hinzu, erscheint der Pin nach dem Veröffentlichen sofort auf der Karte.

Das Ergebnis: Was Nutzer sehen

Auf der veröffentlichten Website sehen Nutzer eine klare, minimalistische Karte mit farbigen Punkt-Markern, wobei jede Farbe für eine Standortkategorie steht. Ein Klick auf einen Marker öffnet ein Pop-up mit Name, Kategorie und weiteren Feldern, die auf Ihr Geschäft zugeschnitten sind.

Das Pop-up kann auch eine Telefonnummer zum direkten Anrufen oder einen Link zur Routenplanung enthalten. Das ist ideal für Dienstleister, bei denen Nutzer sofort handeln sollen, sobald sie den passenden Standort gefunden haben.

Auch der Kartenstil lässt sich in Mapbox anpassen. Wir verwenden den Stil Mapbox Light für einen klaren, modernen Look, der zu Schweizer und deutschen Designstandards passt. Er lässt sich aber an jedes Markenbild anpassen.

Für wen sich diese Lösung eignet

Diese Lösung ist ideal für Unternehmen mit mehreren physischen Standorten, die ihre Standortdaten ohne Entwickler verwalten und wichtige Informationen wie Öffnungszeiten oder die Verfügbarkeit von Dienstleistungen interaktiv zeigen möchten.

Konkrete Beispiele sind Banken und Finanzinstitute mit Filialen und Geldautomaten, Handelsketten mit Flagship-Stores, Outlets und Partnergeschäften, Gesundheitsnetzwerke mit Kliniken, Labors und Apotheken sowie Logistikunternehmen mit Depots, Sammelstellen und Servicestandorten.

In diesen Fällen ist die Karte ein praktisches Werkzeug, mit dem Nutzer den passenden Standort für ihr Anliegen finden.

Warum Mapbox statt Google Maps

Google Maps ist bei den meisten Webprojekten die Standardwahl, hat für diesen Anwendungsfall aber deutliche Grenzen.

Mit Mapbox haben Sie die volle Kontrolle über Marker-Design, Pop-up-Gestaltung und das Erscheinungsbild der Karte. Sie können Ihre Markenfarben exakt übernehmen, eigene Punkt-Marker oder Icons verwenden und jedes visuelle Detail der Pop-ups steuern. Zudem bietet Mapbox ein grosszügiges Gratiskontingent: bis zu 50’000 Kartenaufrufe pro Monat kostenlos, was praktisch jedes kleine und mittlere Unternehmen problemlos abdeckt.

Ist das die richtige Lösung für Ihr Projekt?

Wenn Sie prüfen, ob diese Lösung zu Ihrem Projekt passt, stellt sich eine einfache Frage: Möchten Sie Ihre Standortdaten selbstständig verwalten und eine interaktive, benutzerfreundliche Karte auf Ihrer Website haben?

Wenn ja, ist Webflow CMS + Mapbox die sauberste und am einfachsten zu wartende Lösung, ohne ein eigenes Backend entwickeln zu müssen.

Hat der Kunde nur einen Standort oder rein statische Daten, genügt eine einfache Google-Maps-Einbettung, und dieser Aufwand ist unnötig.

Arbeiten Sie mit uns

Wir bauen Webflow-Websites mit echtem Funktionsumfang: CMS-gesteuerte Karten, Integrationen, Automatisierungen und individuelle Interaktionen. Wenn Sie ein Projekt planen, besprechen wir gerne mit Ihnen den passenden Ansatz.

Kostenloses Erstgespräch buchen →

Michelangelo Digital Media ist eine Webflow- und Framer-Agentur, die mit Start-ups, KMU und etablierten Unternehmen in der Schweiz, in Deutschland und international zusammenarbeitet.

Empfohlene Beiträge

Lassen Sie uns über Ihr Projekt sprechen.

In einem unverbindlichen 20-minütigen Gespräch erzählen Sie uns von Ihrer Idee – und wir sagen Ihnen, ob und wie wir helfen können.

Modern studio workspace

Lassen Sie uns über Ihr Projekt sprechen.

In einem unverbindlichen 20-minütigen Gespräch erzählen Sie uns von Ihrer Idee – und wir sagen Ihnen, ob und wie wir helfen können.

Modern studio workspace

Lassen Sie uns über Ihr Projekt sprechen.

In einem unverbindlichen 20-minütigen Gespräch erzählen Sie uns von Ihrer Idee – und wir sagen Ihnen, ob und wie wir helfen können.

Modern studio workspace