Store Locator: eine interaktive Karte Ihrer Standorte auf Ihrer Website
Für wen es gedacht ist: Sie verwalten mehrere Standorte innerhalb derselben Marke (Franchise, Multi-Site, Kette) und möchten sie auf einer interaktiven, in Ihre Website eingebetteten Karte anzeigen (WordPress, Wix, jedes CMS). Das Widget bietet Städtesuche, Marker, Karten mit Öffnungszeiten und einen direkten "Directions"-Button.
Was Sie tun werden: den Store Locator für Ihre Marke aktivieren, ihn konfigurieren (Design, Features, SEO, Embed), ihn auf Ihrer Website einbetten und das GMB Club Connect Plugin GMB Connect nutzen, um automatische SEO-Seiten pro Standort zu erhalten.
Überblick
Der Store Locator ist ein JavaScript-Widget (Web Component, ~58 KB gzipped), das Sie per Copy-and-paste in jede Webseite einfügen. Es:
- Zeigt Ihre Standorte auf einer Karte (Leaflet + MapTiler)
- Ermöglicht die Suche nach Stadt (mit Nominatim-Geocoding)
- Erkennt die Geolokalisierung des Besuchers (mit dessen Einwilligung)
- Zeigt für jeden Standort an: Foto, Adresse, Öffnungszeiten, serverseitig berechnetes Open/Closed-Badge, Google-Bewertung, Wegbeschreibungs-Link
- Ist anpassbar: Farben, Schriften, Schatten, Custom CSS
Auf WordPress fügt das GMB Club Connect Plugin (bereits erforderlich für Artikel) hinzu:
- Einen Shortcode
[gmbclco_store_locator], den Sie überall platzieren können - Automatisch generierte SEO-Seiten für jeden Standort (CPT + Schema.org LocalBusiness + BreadcrumbList JSON-LD)
- Automatische Standort-Synchronisierung alle 6 Std. über WP-Cron
Voraussetzungen
| Element | Detail |
|---|---|
| Aktive Marke | Der Store Locator wird auf Marken-Ebene konfiguriert, nicht auf Standort-Ebene (eine Karte pro Marke). |
| Vorhandene Standorte | Mindestens 1 Standort mit einem verbundenen Google-Eintrag (sonst ist die Karte leer). Idealerweise 2+, damit der Store Locator Sinn ergibt. |
| Korrekte Adressen | Jeder Standort muss eine ausgefüllte Adresse haben (sonst kein Marker). |
Schritt 1 — Den Store Locator aktivieren
Gehen Sie zu "Settings" (oben rechts über den Sphere-›-Bubble-Selektor), klicken Sie dann im linken Menü unten auf "Sphere settings" und schließlich auf den Eintrag "Store Locator" (unter ORGANIZATION im linken Menü).
Sie sehen:
- Überschrift "Store Locator" mit dem Untertitel "Configure the interactive map of your locations"
- Den "Enable Store Locator"-Umschalter (Standard: OFF mit dem Hinweis "Store Locator disabled")
Legen Sie den Umschalter um. Eine grüne Bestätigungsmeldung "Configuration saved" erscheint. Der Abschnitt "Configuration" klappt mit 4 Tabs auf: Design, Features, SEO, Embed.
Schritt 2 — Das Design konfigurieren
Tab "Design" — steuert das visuelle Erscheinungsbild des Widgets.
| Einstellung | Beschreibung |
|---|---|
| Primary color | Farbe der CTA-Buttons, aktiven Marker, Highlights. Standardmäßig Ihre Markenfarbe. |
| Secondary color | Akzentfarbe (Hover, sekundäre Badges). |
| Marker color | Für die Pins auf der Karte. Sie können eine andere Farbe als Ihre Primärfarbe festlegen (z. B. rote Marker bei blauer Marke). |
| Card style | Shadow, Border, Flat — wählen Sie, wie die Standort-Karten visuell dargestellt werden. |
| Shadow level | Wenn Stil = Shadow: None, Subtle, Medium, Strong. |
| Card radius | Schieberegler 0-24px für den Border-Radius von Karten und Buttons. |
| Main font | Inherit from main font (das Widget übernimmt die font-family der Host-Seite) oder System font (default). |
| Font weight | 300, Light bis 800, Extra-bold für Überschriften. |
| Layout | List (linke Seitenleiste mit vertikaler Liste) oder Grid (Karten als Raster angeordnet). |
| Show logo in header | Umschalter, um das Marken-Logo in der oberen Leiste des Widgets anzuzeigen. |
| Review CTA text | Z. B. "Your review matters" (sichtbar, wenn Sie den Review-CTA in Features aktivieren). |
| Review CTA button | Z. B. "Leave a review". |
| Custom CSS | Textfeld zum Einfügen von fortgeschrittenem CSS. Siehe das Dropdown "CSS classes guide", das jede ansteuerbare Klasse auflistet: .gmbc-wrapper, .gmbc-card, .gmbc-btn-primary, usw. |
Wenn Sie im Tab weiter nach unten scrollen, finden Sie die übrigen Anpassungsbereiche (Typography, Cards and shapes, Card layout, Map marker, Visible sections on your site pages, Custom CSS) mit dem "Save"-Button ganz unten:
Alle Änderungen sind sofort wirksam: speichern, die Seite neu laden, auf der Sie es eingebettet haben, und Sie sehen sie.
Schritt 3 — Die Features konfigurieren
Tab "Features" — welche Verhaltensweisen aktiviert werden.
| Umschalter | Wirkung |
|---|---|
| Search bar | Aktiviert die Suchleiste oben im Widget (Nominatim-Autocomplete) |
| Automatic geolocation | "Locate me"-Button, der den Besucher um Einwilligung bittet und die Karte auf ihn zentriert |
| Open/Closed badge | Zeigt auf jeder Karte ein grünes "Open"/rotes "Closed"-Badge an, in Echtzeit berechnet aus den Google-Öffnungszeiten und der Zeitzone des Standorts |
| Marker clusters | Statt 50 Marker nebeneinander anzuzeigen, werden sie zu einem zoombaren Cluster gruppiert (nützlich ab 10 Standorten) |
| Directions button | Erzeugt einen Deep-Link zu Google Maps / Apple Maps ausgehend vom Standort des Besuchers |
| Google rating on cards | Zeigt die Durchschnittsbewertung + Anzahl der Bewertungen an (aus dem Google-Eintrag des Standorts) |
| Review CTA on the card | Fügt einen "Leave a review"-Button hinzu, der die Google-Bewertungsseite des Standorts öffnet |
Wenn Sie weiter scrollen, sehen Sie außerdem "Hours display mode" (Compact (default) / Today / Full) und "Primary button" (Directions / Website / Call):
Kategorien
Sie können Ihre Standorte nach Kategorie klassifizieren (z. B. Restaurant, Bar, Snack), damit Besucher das Widget filtern können. Sie definieren die Kategorien in diesem Abschnitt und weisen jedem Standort welche zu.
Nützlich für gemischte Marken: Wenn Sie innerhalb der Marke "Food'Alexandre" sowohl Restaurants als auch Food-Trucks haben, können Besucher filtern, um nur das zu sehen, was sie interessiert.
Schritt 4 — SEO konfigurieren
Tab "SEO" — nur nützlich, wenn Sie das GMB Club Connect Plugin GMB Connect verwenden, das eigene Seiten pro Standort generiert.
| Feld | Beschreibung |
|---|---|
| Index page title | Die H1 der Seite, die alle Ihre Standorte auflistet (z. B. Our locations) |
| Page slug | Slug der URL dieser Index-Seite (our-locations standardmäßig, automatisch generiert, wenn leer) |
| Page title template | Für einzelne Standort-Seiten. Variablen: {bulle_name}, {sphere_name}, {city}. Z. B. {bulle_name} - {sphere_name} |
| Meta description template | Für das <meta name="description">. Z. B. Find {bulle_name} in {city}. |
Hinweis: Diese Vorlagen werden verwendet, um SEO-Seiten auf Ihrer Website zu generieren. Klicken Sie auf "Save", um zu speichern.
Schritt 5 — Das Widget auf Ihrer Website einbetten
Tab "Embed" — holen Sie sich den Code zum Kopieren und Einfügen.
Der Button "Start integration" öffnet den Assistenten, der das HTML-Snippet zum Kopieren und Einfügen auf Ihrer Website generiert.
Sie erhalten einen einsatzbereiten Codeblock:
<script src="https://cdn.gmb-club.com/store-locator/v2/widget.js" defer></script>
<gmbclo-store-locator
api-key="YOUR_PUBLIC_KEY"
sphere-id="YOUR_SPHERE_ID"
></gmbclo-store-locator>
| Element | Beschreibung |
|---|---|
<script src= | Lädt das Widget async/defer. Am besten im <head> oder direkt vor </body> platziert. |
<gmbclo-store-locator> | Custom Web Component. Platzieren Sie es dort, wo die Karte erscheinen soll auf Ihrer Seite. |
api-key | Öffentlicher Schlüssel, der für Ihre Marke generiert wird. Sichtbar auf Ihrer Settings-Seite. Sicherheitshinweis: Der Schlüssel ist read-only, kein Risiko, wenn er in öffentlichem HTML steht. |
sphere-id | UUID Ihrer Marke, automatisch generiert. |
Der Button "Copy" kopiert alles in die Zwischenablage.
CMS-Tipp: Verwenden Sie auf Ihrer Website NICHT dieses Snippet — nutzen Sie stattdessen den Shortcode des GMB Connect Plugins (siehe unten). Auf Wix oder Webflow verwenden Sie einen HTML/Embed-Block mit diesem Snippet.
Für Ihre Website: das GMB Club Connect Plugin
Wenn Sie das GMB Club Connect Plugin bereits installiert haben (für Artikel), ist der Store Locator kostenlos als Modul verfügbar.
Das Store-Locator-Modul im Plugin aktivieren
- Gehen Sie zum Admin Ihrer Website → Plugins › GMB Club Connect › Settings
- Aktivieren Sie den Abschnitt "Store Locator"
- Das Plugin synchronisiert Ihre Standorte automatisch mit GMB Club (alle 6 Std. oder manuell über den "Sync now"-Button)
Den Shortcode verwenden
Bearbeiten Sie die Seite, auf der Sie die Karte anzeigen möchten (z. B. die Seite "Our locations"), und fügen Sie ein:
[gmbclco_store_locator]
Sie können Parameter übergeben:
[gmbclco_store_locator height="600px" zoom="11" category="restaurant"]
| Parameter | Bedeutung |
|---|---|
height | Widget-Höhe (Standard: 700px) |
zoom | Anfänglicher Karten-Zoom (Standard: 6 für eine Ansicht ganz Frankreichs) |
category | Beschränkt die Anzeige auf eine Kategorie (Slug) |
Automatisch generierte SEO-Seiten
Sobald das Plugin aktiviert ist, erstellt es automatisch:
- Einen Custom Post Type
gmbclco_location(eine URL pro Standort) - Eine Taxonomie
gmbclco_location_city(Gruppierung nach Stadt) - Seitenvorlagen: Einzelseite (
single-gmbclco_location.php) + Stadt-Archiv
So wird ein Standort "Food'Alexandre Lyon Bellecour" automatisch zu einer Seite Ihrer Website unter der URL yoursite.com/locations/lyon/foodalexandre-lyon-bellecour mit:
- H1-Titel = Standort-Name
- Karte nur auf den Standort zentriert
- Info-Block (Adresse, Telefon, Website, Google-Eintrag)
- Block mit Wochenöffnungszeiten
- CTA-Block (Bewertung abgeben, Wegbeschreibung ansehen)
- Breadcrumb (
Home › Locations › Lyon › Food'Alexandre Lyon Bellecour) - Schema.org JSON-LD (LocalBusiness + BreadcrumbList)
SEO-Wirkung: Diese Einzelseiten ranken für geo-gezielte Suchanfragen (
food alexandre lyon) und das Schema.org verbessert Ihre Erscheinung im Local Pack von Google.
Was Ihr Endkunde sieht
Wenn die Seite mit dem Widget lädt, sieht Ihr Besucher:
- Eine zentrierte Karte (auf allen Ihren Standorten oder auf seiner Geolokalisierung, wenn er sie erlaubt)
- Eine Stadt-/Adress-Suchleiste oben
- Eine Liste von Karten links (oder ein Raster) mit: Name, Adresse, Entfernung, Open/Closed-Badge, Google-Bewertung ★
- Beim Klick auf eine Karte: Die Karte zoomt auf den Marker, die Karte öffnet sich mit vollständigen Öffnungszeiten, Kontakt, Website-Link, "Directions"-Button
Die Performance ist schnell (~58 KB, Geolokalisierung browserseitig, Geocoding über GMB Club geproxyt mit einem Redis-Cache von 24 Std., um das Nominatim-Kontingent zu schonen).
Empfohlener Ablauf
- Den Store Locator aktivieren (
Sphere settings › Store Locator › toggle) - Design konfigurieren, passend zu Ihrer Marke (Farben, Schriften, Schatten)
- Features konfigurieren (mindestens aktivieren: Search, Geoloc, Open/Closed-Badge, Directions)
- Wenn Sie Ihre Website nutzen → das Plugin aktivieren + den SEO-Tab für die URL-/Titel-Vorlagen ausfüllen
- Test: auf einer Entwurfsseite Ihrer Website einbetten → prüfen, dass jeder Standort erscheint, dass die Öffnungszeiten stimmen, dass die Wegbeschreibungen funktionieren
- Die Seite auf Ihrer Website veröffentlichen
Häufige Probleme
Meine Standorte erscheinen nicht auf der Karte → Drei Ursachen: (1) Sie haben keine Adresse — gehen Sie zum Standort → Settings › Information. (2) Das Geocoding ist fehlgeschlagen — stellen Sie sicher, dass die Adresse gültig und sauber ist (keine Tippfehler). (3) Der Redis-Cache braucht 24 Std. zum Aktualisieren — warten Sie oder kontaktieren Sie den Support zum Leeren.
Das Open/Closed-Badge ist falsch
→ Prüfen Sie die Zeitzone der Marke unter Settings › General (z. B. Europe/Paris (GMT+2)). Das Badge wird serverseitig aus dieser Zeitzone + den Google-Öffnungszeiten des Standorts berechnet.
Das Widget lädt nicht, die JS-Konsole zeigt einen 401-Fehler
→ Ihr Zugangsschlüssel ist ungültig oder widerrufen. Gehen Sie zu Settings › your site Plugin › API Keys (ja, genau dort befinden sie sich), generieren Sie einen neuen Schlüssel. Aktualisieren Sie das Snippet auf Ihrer Website.
Das Widget funktioniert lokal, aber nicht in der Produktion
→ Prüfen Sie CORS: Das Widget ruft https://app.gmb-club.com/api/v2/store-locator/... auf. Wenn eine Firewall blockiert, erlauben Sie diese Domain.
Das GMB Club Connect Plugin synchronisiert keine Standorte
→ Gehen Sie zum Plugin → Button "Sync now". Wenn es fehlschlägt, prüfen Sie den Kopplungsstatus unter Settings › your site Plugin. Verbinden Sie bei Bedarf neu.
Wie style ich das Widget tiefgreifend (über die Optionen des Design-Tabs hinaus)?
→ Nutzen Sie das Feld Custom CSS im Design-Tab. Das Dropdown "CSS classes guide" listet jede ansteuerbare Klasse auf (z. B. .gmbc-wrapper, .gmbc-card-active, .gmbc-badge-open). Sie können dort beliebiges CSS eingeben, und es wird innerhalb des Shadow DOM des Widgets angewendet.
Meine vom Plugin generierten Seiten meiner Website erscheinen nicht bei Google
→ (1) Stellen Sie sicher, dass die XML-Sitemap Ihrer Website den gmbclco_location CPT enthält (Yoast / Rank Math schließen ihn standardmäßig ein). (2) Reichen Sie die Archiv-URL /locations/ bei der Google Search Console ein, um die Indexierung zu beschleunigen. (3) Lokales SEO braucht 4-8 Wochen, um sich nach der Erstellung zu stabilisieren.