Store Locator: una mappa interattiva dei tuoi stabilimenti sul tuo sito web
A chi è rivolto: gestisci più stabilimenti all'interno dello stesso brand (franchising, multisede, catena) e vuoi mostrarli su una mappa interattiva integrata nel tuo sito web (WordPress, Wix, qualsiasi CMS). Il widget offre ricerca per città, marker, schede con orari di apertura e un pulsante diretto "Directions".
Cosa farai: attivare lo Store Locator per il tuo brand, configurarlo (design, features, SEO, embed), integrarlo nel tuo sito e usare il plugin GMB Club Connect GMB Connect per ottenere pagine SEO automatiche per stabilimento.
Panoramica
Lo Store Locator è un widget JavaScript (Web Component, ~58 KB gzipped) che copi e incolli in qualsiasi pagina web. Esso:
- Mostra i tuoi stabilimenti su una mappa (Leaflet + MapTiler)
- Consente la ricerca per città (con geocoding Nominatim)
- Rileva la geolocalizzazione del visitatore (con il suo consenso)
- Mostra per ogni stabilimento: foto, indirizzo, orari di apertura, badge Open/Closed calcolato lato server, valutazione Google, link alle indicazioni stradali
- È personalizzabile: colori, font, ombre, CSS personalizzato
Su WordPress, il plugin GMB Club Connect (già necessario per gli Articoli) aggiunge:
- Uno shortcode
[gmbclco_store_locator]da inserire dove vuoi - Pagine SEO generate automaticamente per ogni stabilimento (CPT + Schema.org LocalBusiness + BreadcrumbList JSON-LD)
- Sincronizzazione automatica degli stabilimenti ogni 6 h tramite WP-Cron
Prerequisiti
| Elemento | Dettaglio |
|---|---|
| Brand attivo | Lo Store Locator si configura a livello di brand, non di stabilimento (una mappa per brand). |
| Stabilimenti esistenti | Almeno 1 stabilimento con una scheda Google collegata (altrimenti la mappa è vuota). Idealmente 2 o più affinché lo store locator abbia senso. |
| Indirizzi corretti | Ogni stabilimento deve avere un indirizzo compilato (altrimenti nessun marker). |
Passo 1 — Attivare lo Store Locator
Vai su "Settings" (in alto a destra tramite il selettore Sphere › Bubble), poi nel menu a sinistra fai clic su "Sphere settings" in basso, e infine sulla voce "Store Locator" (sotto ORGANIZATION nel menu a sinistra).
Vedrai:
- Intestazione "Store Locator" con il sottotitolo "Configure the interactive map of your locations"
- L'interruttore "Enable Store Locator" (predefinito: OFF con la nota "Store Locator disabled")
Attiva l'interruttore. Compare un messaggio di conferma verde "Configuration saved". La sezione "Configuration" si apre con 4 schede: Design, Features, SEO, Embed.
Passo 2 — Configurare il design
Scheda "Design" — controlla l'aspetto visivo del widget.
| Impostazione | Descrizione |
|---|---|
| Primary color | Colore dei pulsanti CTA, marker attivi, evidenziazioni. Per impostazione predefinita il colore del tuo brand. |
| Secondary color | Colore d'accento (hover, badge secondari). |
| Marker color | Per i pin sulla mappa. Puoi impostare un colore diverso dal primario (es. marker rossi su un brand blu). |
| Card style | Shadow, Border, Flat — scegli come rendere visivamente le schede degli stabilimenti. |
| Shadow level | Se lo stile = Shadow: None, Subtle, Medium, Strong. |
| Card radius | Cursore 0-24px per il border-radius di schede e pulsanti. |
| Main font | Inherit from main font (il widget adotta la font-family della pagina ospitante) oppure System font (default). |
| Font weight | Da 300, Light a 800, Extra-bold per i titoli. |
| Layout | List (barra laterale sinistra con elenco verticale) oppure Grid (schede disposte a griglia). |
| Show logo in header | Interruttore per mostrare il logo del brand nella barra superiore del widget. |
| Review CTA text | Es. "Your review matters" (visibile se attivi il CTA recensione in Features). |
| Review CTA button | Es. "Leave a review". |
| Custom CSS | Campo di testo per iniettare CSS avanzato. Consulta il menu a tendina "CSS classes guide" che elenca ogni classe targettizzabile: .gmbc-wrapper, .gmbc-card, .gmbc-btn-primary, ecc. |
Scorrendo più in basso nella scheda, troverai le altre sezioni di personalizzazione (Typography, Cards and shapes, Card layout, Map marker, Visible sections on your site pages, Custom CSS) con il pulsante "Save" in fondo:
Tutte le modifiche sono immediate: salva, ricarica la pagina in cui l'hai integrato, e le vedrai.
Passo 3 — Configurare le funzionalità
Scheda "Features" — quali comportamenti attivare.
| Interruttore | Effetto |
|---|---|
| Search bar | Attiva la barra di ricerca in cima al widget (autocompletamento Nominatim) |
| Automatic geolocation | Pulsante "Locate me" che chiede il consenso al visitatore e centra la mappa su di lui |
| Open/Closed badge | Mostra un badge verde "Open" / rosso "Closed" su ogni scheda, calcolato in tempo reale dagli orari di apertura di Google e dal fuso orario dello stabilimento |
| Marker clusters | Invece di mostrare 50 marker affiancati, li raggruppa in un cluster ingrandibile (utile oltre i 10 stabilimenti) |
| Directions button | Genera un deep link a Google Maps / Apple Maps dalla posizione del visitatore |
| Google rating on cards | Mostra la valutazione media + il numero di recensioni (recuperato dalla scheda Google dello stabilimento) |
| Review CTA on the card | Aggiunge un pulsante "Leave a review" che apre la pagina delle recensioni Google dello stabilimento |
Scorrendo ancora vedrai anche "Hours display mode" (Compact (default) / Today / Full) e "Primary button" (Directions / Website / Call):
Categorie
Puoi classificare i tuoi stabilimenti per categoria (es. Restaurant, Bar, Snack) in modo che i visitatori possano filtrare il widget. Definisci le categorie in questa sezione e assegni gli stabilimenti a ciascuna.
Utile per i brand misti: se all'interno del brand "Food'Alexandre" hai sia ristoranti sia food truck, i visitatori possono filtrare per vedere solo ciò che li interessa.
Passo 4 — Configurare la SEO
Scheda "SEO" — utile solo se usi il plugin GMB Club Connect GMB Connect che genera pagine dedicate per stabilimento.
| Campo | Descrizione |
|---|---|
| Index page title | L'H1 della pagina che elenca tutti i tuoi stabilimenti (es. Our locations) |
| Page slug | Slug dell'URL di questa pagina indice (our-locations per impostazione predefinita, generato automaticamente se vuoto) |
| Page title template | Per le pagine dei singoli stabilimenti. Variabili: {bulle_name}, {sphere_name}, {city}. Es. {bulle_name} - {sphere_name} |
| Meta description template | Per il <meta name="description">. Es. Find {bulle_name} in {city}. |
Nota: Questi template vengono usati per generare pagine SEO sul tuo sito. Fai clic su "Save" per salvare.
Passo 5 — Integrare il widget nel tuo sito
Scheda "Embed" — prendi il codice da copiare e incollare.
Il pulsante "Start integration" apre l'assistente che genera lo snippet HTML da copiare e incollare nel tuo sito.
Ottieni un blocco di codice pronto all'uso:
<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>
| Elemento | Descrizione |
|---|---|
<script src= | Carica il widget async/defer. Meglio posizionarlo nell'<head> o subito prima di </body>. |
<gmbclo-store-locator> | Custom Web Component. Posizionalo dove vuoi che appaia la mappa nella tua pagina. |
api-key | Chiave pubblica generata per il tuo brand. Visibile nella tua pagina Settings. Nota di sicurezza: la chiave è di sola lettura, nessun rischio se si trova in HTML pubblico. |
sphere-id | UUID del tuo brand, generato automaticamente. |
Il pulsante "Copy" copia tutto negli appunti.
Consiglio CMS: sul tuo sito, NON usare questo snippet — usa invece lo shortcode del plugin GMB Connect (vedi sotto). Su Wix o Webflow, usa un blocco HTML/Embed con questo snippet.
Per il tuo sito: il plugin GMB Club Connect
Se hai già installato il plugin GMB Club Connect (per gli articoli), lo Store Locator è disponibile gratuitamente come modulo.
Attivare il modulo Store Locator nel plugin
- Vai nell'admin del tuo sito → Plugins › GMB Club Connect › Settings
- Attiva la sezione "Store Locator"
- Il plugin sincronizza automaticamente i tuoi stabilimenti con GMB Club (ogni 6 h, oppure manualmente tramite il pulsante "Sync now")
Usare lo shortcode
Modifica la pagina in cui vuoi mostrare la mappa (es. la pagina "Our locations") e inserisci:
[gmbclco_store_locator]
Puoi passare parametri:
[gmbclco_store_locator height="600px" zoom="11" category="restaurant"]
| Parametro | Significato |
|---|---|
height | Altezza del widget (predefinito: 700px) |
zoom | Zoom iniziale della mappa (predefinito: 6 per una vista dell'intera Francia) |
category | Limita la visualizzazione a una categoria (slug) |
Pagine SEO generate automaticamente
Una volta attivato il plugin, crea automaticamente:
- Un Custom Post Type
gmbclco_location(un URL per stabilimento) - Una tassonomia
gmbclco_location_city(raggruppamento per città) - Template di pagina: pagina individuale (
single-gmbclco_location.php) + archivio città
Così uno stabilimento "Food'Alexandre Lyon Bellecour" diventa automaticamente una pagina del tuo sito all'URL yoursite.com/locations/lyon/foodalexandre-lyon-bellecour con:
- Titolo H1 = nome dello stabilimento
- Mappa centrata solo sullo stabilimento
- Blocco informazioni (indirizzo, telefono, sito web, scheda Google)
- Blocco orari settimanali
- Blocco CTA (lasciare una recensione, vedere le indicazioni)
- Breadcrumb (
Home › Locations › Lyon › Food'Alexandre Lyon Bellecour) - Schema.org JSON-LD (LocalBusiness + BreadcrumbList)
Impatto SEO: queste pagine individuali si posizionano per ricerche geolocalizzate (
food alexandre lyon) e lo Schema.org migliora la tua comparsa nel local pack di Google.
Cosa vede il tuo cliente finale
Quando la pagina che contiene il widget si carica, il tuo visitatore vede:
- Una mappa centrata (su tutti i tuoi stabilimenti, o sulla sua geolocalizzazione se la consente)
- Una barra di ricerca per città/indirizzo in alto
- Un elenco di schede a sinistra (o una griglia) con: nome, indirizzo, distanza, badge Open/Closed, valutazione Google ★
- Facendo clic su una scheda: la mappa ingrandisce sul marker, la scheda si apre con gli orari completi, contatto, link al sito web, pulsante "Directions"
Le prestazioni sono rapide (~58 KB, geolocalizzazione lato browser, geocoding proxato tramite GMB Club con una cache Redis di 24 h per preservare la quota Nominatim).
Flusso di lavoro consigliato
- Attivare lo Store Locator (
Sphere settings › Store Locator › toggle) - Configurare Design in linea con il tuo brand (colori, font, ombre)
- Configurare Features (attivare come minimo: Search, Geoloc, Open/Closed badge, Directions)
- Se usi il tuo sito → attivare il plugin + compilare la scheda SEO per i template di URL/titolo
- Test: integra su una pagina bozza del tuo sito → verifica che ogni stabilimento appaia, che gli orari siano corretti, che le indicazioni funzionino
- Pubblicare la pagina sul tuo sito
Problemi comuni
I miei stabilimenti non appaiono sulla mappa → Tre cause: (1) non hanno un indirizzo — vai allo stabilimento → Settings › Information. (2) il geocoding è fallito — assicurati che l'indirizzo sia valido e pulito (senza errori di battitura). (3) la cache Redis impiega 24 h ad aggiornarsi — attendi o contatta il supporto per svuotarla.
Il badge Open/Closed è errato
→ Controlla il fuso orario del brand in Settings › General (es. Europe/Paris (GMT+2)). Il badge è calcolato lato server da questo fuso orario + gli orari di apertura di Google dello stabilimento.
Il widget non si carica, la console JS mostra un errore 401
→ La tua chiave di accesso è invalida o revocata. Vai su Settings › your site Plugin › API Keys (sì, è lì che si trovano), rigenera una chiave. Aggiorna lo snippet sul tuo sito.
Il widget funziona in locale ma non in produzione
→ Controlla il CORS: il widget chiama https://app.gmb-club.com/api/v2/store-locator/.... Se hai un firewall che blocca, consenti questo dominio.
Il plugin GMB Club Connect non sincronizza gli stabilimenti
→ Vai al plugin → pulsante "Sync now". Se fallisce, controlla lo stato di accoppiamento in Settings › your site Plugin. Riconnetti se necessario.
Come applico uno stile approfondito al widget (oltre alle opzioni della scheda Design)?
→ Usa il campo Custom CSS nella scheda Design. Il menu a tendina "CSS classes guide" elenca ogni classe targettizzabile (es. .gmbc-wrapper, .gmbc-card-active, .gmbc-badge-open). Puoi inserire CSS arbitrario lì e verrà applicato all'interno dello Shadow DOM del widget.
Le pagine del tuo sito generate dal plugin non appaiono su Google
→ (1) Assicurati che la sitemap XML del tuo sito includa il CPT gmbclco_location (Yoast / Rank Math lo includono per impostazione predefinita). (2) Invia l'URL dell'archivio /locations/ a Google Search Console per accelerare l'indicizzazione. (3) La SEO locale impiega 4-8 settimane per stabilizzarsi dopo la creazione.