Store Locator : carte interactive de tes établissements sur ton site
À qui ça s'adresse : tu gères plusieurs établissements dans une même sphère (franchise, multi-sites, chaîne) et tu veux les afficher sur une carte interactive embarquée sur ton site web (WordPress, Wix, n'importe quel CMS). Le widget propose une recherche par ville, des marqueurs, des cards avec horaires, et un bouton « Itinéraire » direct.
Ce que tu vas voir : activer le Store Locator pour ta sphère, le configurer (design, fonctionnalités, SEO, intégration), l'embarquer sur ton site, et utiliser le plugin GMB Club Connect GMB Connect pour des pages SEO automatiques par établissement.
Aperçu
Le Store Locator est un widget JavaScript (Web Component, ~58 Ko gzipped) que tu copies-colles sur n'importe quelle page web. Il :
- Affiche tes bulles sur une carte (Leaflet + MapTiler)
- Permet la recherche par ville (avec géocodage Nominatim)
- Détecte la géolocalisation du visiteur (avec son accord)
- Affiche pour chaque établissement : photo, adresse, horaires, badge Ouvert/Fermé calculé serveur, note Google, lien itinéraire
- Est personnalisable : couleurs, polices, ombres, CSS custom
Sur WordPress, le plugin GMB Club Connect (déjà nécessaire pour Articles) ajoute :
- Un shortcode
[gmbclco_store_locator]à mettre où tu veux - Des pages SEO auto-générées pour chaque établissement (CPT + Schema.org LocalBusiness + BreadcrumbList JSON-LD)
- Sync automatique des bulles toutes les 6h via WP-Cron
Pré-requis
| Élément | Détail |
|---|---|
| Sphère active | Le Store Locator se configure au niveau Sphère, pas Bulle (une carte par sphère). |
| Bulles existantes | Au minimum 1 bulle avec une fiche GMB connectée (sinon la carte est vide). Idéalement 2+ pour que le store locator ait du sens. |
| Adresses correctes | Chaque bulle doit avoir une adresse renseignée (sinon, pas de marqueur). |
Étape 1 — Activer le Store Locator
Va dans « Paramètres » (en haut à droite via le sélecteur Sphère › Bulle), puis dans le menu de gauche clique sur « Paramètres sphère » en bas, et enfin sur l'entrée « Store Locator » (sous ORGANISATION dans le menu de gauche).
Tu vois :
- En-tête « Store Locator » avec sous-titre « Configurez la carte interactive de vos établissements »
- L'interrupteur « Activer le Store Locator » (par défaut : OFF avec mention « Store Locator désactivé »)
Active l'interrupteur. Un message de confirmation vert « Configuration enregistrée » apparaît. La section « Configuration » se déploie avec 4 onglets : Design, Fonctionnalités, SEO, Intégration.
Étape 2 — Configurer le design
Onglet « Design » — ce qui contrôle l'apparence visuelle du widget.
| Paramètre | Description |
|---|---|
| Couleur principale | Couleur des boutons CTA, marqueurs actifs, surbrillance. Reprend par défaut ta couleur de marque. |
| Couleur secondaire | Couleur des accents (hover, badges secondaires). |
| Couleur des marqueurs | Pour les pins sur la carte. Tu peux mettre une couleur différente de ta couleur principale (ex : marqueurs rouges sur charte bleue). |
| Style des cartes | Ombre, Bordure, Plat — choisis comment les cards établissements rendent visuellement. |
| Niveau d'ombre | Si style = Ombre : Aucune, Subtile, Moyenne, Forte. |
| Arrondi des coins | Slider 0-24px pour le border-radius des cards et boutons. |
| Police | Hérite de la police principale (le widget prend la font-family de la page hôte) ou Police système (défaut). |
| Poids des polices | 300 Light à 800 Extra-bold pour les titres. |
| Layout | Liste (sidebar à gauche avec liste verticale) ou Grille (cards en grille). |
| Afficher le logo dans l'en-tête | Interrupteur pour mettre le logo de la sphère dans la barre supérieure du widget. |
| Texte CTA Avis | Ex : « Votre avis compte » (visible si tu actives le CTA avis dans Fonctionnalités). |
| Bouton CTA Avis | Ex : « Laisser un avis » |
| CSS personnalisé | Champ texte pour injecter du CSS avancé. Voir le « Guide des classes CSS » déroulant qui liste toutes les classes ciblables : .gmbc-wrapper, .gmbc-card, .gmbc-btn-primary, etc. |
En faisant défiler l'onglet, tu retrouves les autres sections de personnalisation (Typographie, Cartes et formes, Layout des cartes, Marqueur de carte, Sections visibles pages votre site, CSS personnalisé) avec en bas le bouton « Enregistrer » :
Toutes les modifs sont immédiates : enregistre, recharge ta page d'intégration, c'est appliqué.
Étape 3 — Configurer les fonctionnalités
Onglet « Fonctionnalités » — quels comportements activer.
| Interrupteur | Effet |
|---|---|
| Recherche par ville | Active la barre de recherche en haut du widget (autocomplétion Nominatim) |
| Géolocalisation | Bouton « Localiser-moi » qui demande l'accord du visiteur et centre la carte sur lui |
| Badge Ouvert/Fermé | Affiche un badge vert « Ouvert » / rouge « Fermé » sur chaque card, calculé en temps réel selon les horaires Google et le fuseau horaire de la bulle |
| Clusters de marqueurs | Au lieu d'afficher 50 marqueurs côte à côte, regrouper en cluster zoomable (utile au-dessus de 10 bulles) |
| Bouton « Itinéraire » | Génère un lien deep-link vers Google Maps / Apple Maps depuis la position du visiteur |
| Note Google sur les cards | Affiche la note moyenne + nombre d'avis (récupéré de la fiche GMB de la bulle) |
| CTA Avis sur la fiche | Ajoute un bouton « Laisser un avis » qui ouvre la page Google Reviews de la bulle |
En scrollant tu vois également « Mode d'affichage des horaires » (Compact (défaut) / Aujourd'hui / Complet) et « Bouton principal » (Itinéraire / Site web / Appeler) :
Catégories
Tu peux classer tes bulles par catégorie (ex : Restaurant, Bar, Snack) pour permettre au visiteur de filtrer le widget. Tu définis les catégories dans cette section et assignes les bulles à chacune.
Utile pour les sphères mixtes : si dans la sphère « Food'Alexandre » tu as à la fois des restaurants et des food trucks, le visiteur peut filtrer pour ne voir que ce qui l'intéresse.
Étape 4 — Configurer le SEO
Onglet « SEO » — uniquement utile si tu utilises le plugin GMB Club Connect GMB Connect qui génère des pages dédiées par bulle.
| Champ | Description |
|---|---|
| Titre de la page index | Le titre H1 de la page qui liste tous tes établissements (ex : Nos établissements) |
| Slug de la page | Slug de l'URL de cette page index (nos-etablissements par défaut, auto-généré si vide) |
| Template titre de page | Pour les pages bulle individuelles. Variables : {bulle_name}, {sphere_name}, {city}. Ex : {bulle_name} - {sphere_name} |
| Template meta description | Pour le <meta name="description">. Ex : Trouvez {bulle_name} à {city}. |
Note : Ces modèles sont utilisés pour générer les pages SEO sur votre site. Clique sur « Enregistrer » pour sauvegarder.
Étape 5 — Intégrer le widget sur ton site
Onglet « Intégration » — récupère le code à copier-coller.
Le bouton « Commencer l'intégration » ouvre l'assistant qui te génère le snippet HTML à copier-coller sur ton site.
Tu obtiens un bloc de code prêt à l'emploi :
<script src="https://cdn.gmb-club.com/store-locator/v2/widget.js" defer></script>
<gmbclo-store-locator
api-key="VOTRE_CLE_PUBLIQUE"
sphere-id="VOTRE_SPHERE_ID"
></gmbclo-store-locator>
| Élément | Description |
|---|---|
<script src= | Charge le widget en async/defer. Met-le idéalement dans le <head> ou juste avant </body>. |
<gmbclo-store-locator> | Web Component custom. À placer où tu veux que la carte apparaisse sur ta page. |
api-key | Clé publique générée pour ta sphère. Visible sur ta fiche Paramètres. Sécurité : la clé est en lecture seule, pas un risque si elle est dans le HTML public. |
sphere-id | UUID de ta sphère, généré automatiquement. |
Le bouton « Copier le code » copie tout dans le presse-papier.
Astuce CMS : sur votre site, n'utilise PAS ce snippet — utilise plutôt le shortcode du plugin GMB Connect (voir ci-dessous). Sur Wix ou Webflow, utilise un bloc HTML/Embed avec ce snippet.
Pour votre site : le plugin GMB Club Connect
Si tu as déjà installé le plugin GMB Club Connect (pour les articles), le Store Locator est disponible gratuitement comme module.
Activer le module Store Locator dans le plugin
- Va sur ton site en admin → Extensions › GMB Club Connect › Réglages
- Active la section « Store Locator »
- Le plugin synchronise automatiquement tes bulles avec GMB Club (toutes les 6h, ou manuellement via le bouton « Synchroniser maintenant »)
Utiliser le shortcode
Édite la page où tu veux afficher la carte (ex : page « Nos établissements ») et insère :
[gmbclco_store_locator]
Tu peux passer des paramètres :
[gmbclco_store_locator height="600px" zoom="11" category="restaurant"]
| Param | Sens |
|---|---|
height | Hauteur du widget (défaut : 700px) |
zoom | Zoom initial de la carte (défaut : 6 pour vue France) |
category | Limite l'affichage à une catégorie (slug) |
Pages SEO auto-générées
Une fois le plugin activé, il crée automatiquement :
- Un Custom Post Type
gmbclco_location(une URL par bulle) - Une taxonomy
gmbclco_location_city(groupement par ville) - Des modèles de page : page individuelle (
single-gmbclco_location.php) + archive par ville
Donc une bulle « Food'Alexandre Lyon Bellecour » devient automatiquement une page votre site à l'URL tonsite.com/etablissements/lyon/foodalexandre-lyon-bellecour avec :
- Titre H1 = nom bulle
- Carte centrée sur la bulle uniquement
- Bloc infos (adresse, téléphone, site, fiche Google)
- Bloc horaires de la semaine
- Bloc CTA (laisser un avis, voir l'itinéraire)
- Fil d'Ariane (
Accueil › Établissements › Lyon › Food'Alexandre Lyon Bellecour) - Schema.org JSON-LD (LocalBusiness + BreadcrumbList)
Effet SEO : ces pages individuelles se positionnent sur les recherches géolocalisées (
food alexandre lyon) et le Schema.org boost ton apparition dans le pack local Google.
Que voit ton client final
Au chargement de la page contenant le widget, ton visiteur voit :
- Une carte centrée (sur l'ensemble de tes bulles ou sur sa géolocalisation s'il l'autorise)
- Une barre de recherche ville/adresse en haut
- Une liste de cards à gauche (ou en grille) avec : nom, adresse, distance, badge Ouvert/Fermé, note Google ★
- En cliquant sur une card : la carte zoom sur le marqueur, la card s'ouvre avec horaires complets, contact, lien site web, bouton « Itinéraire »
L'expérience est rapide (~58 Ko, géolocalisation côté navigateur, géocodage proxyé via GMB Club avec cache Redis 24h pour économiser le quota Nominatim).
Méthode recommandée
- Active le Store Locator (
Paramètres sphère › Store Locator › interrupteur) - Configure le Design pour matcher ta charte (couleurs, polices, ombres)
- Configure les Fonctionnalités (active au minimum : Recherche, Géoloc, Badge Ouvert/Fermé, Itinéraire)
- Si tu as votre site → active le plugin + remplis l'onglet SEO pour les modèles URL/titre
- Teste : intègre sur une page brouillon de ton site → vérifie que toutes les bulles apparaissent, que les horaires sont bons, que les itinéraires fonctionnent
- Publie la page sur ton site
Problèmes fréquents
Mes bulles n'apparaissent pas sur la carte → Trois causes : (1) elles n'ont pas d'adresse renseignée — va dans la bulle → Paramètres › Informations. (2) le géocodage a échoué — vérifie que l'adresse est valide et propre (pas de fautes). (3) le cache Redis met 24h à se rafraîchir — patiente ou contacte le support pour purger.
Le badge Ouvert/Fermé est faux
→ Vérifie le fuseau horaire de la sphère dans Paramètres › Général (ex : Europe/Paris (GMT+2)). Le badge est calculé côté serveur en fonction de ce fuseau + des horaires Google de la bulle.
Le widget ne se charge pas, console JS affiche une erreur 401
→ Ta clé d'accès est invalide ou révoquée. Va dans Paramètres › Plugin GMB Club Connect › Clés d'accès (oui c'est rangé là), régénère une clé. Mets à jour le snippet sur ton site.
Le widget fonctionne en local mais pas en prod
→ Vérifie le CORS : le widget appelle https://app.gmb-club.com/api/v2/store-locator/.... Si tu as un firewall qui bloque, débloque ce domaine.
Le plugin GMB Club Connect ne sync pas les bulles
→ Va sur le plugin → bouton « Synchroniser maintenant ». Si ça échoue, vérifie le statut du jumelage dans Paramètres › Plugin GMB Club Connect. Reconnecte si besoin.
Comment styler le widget en profondeur (au-delà des options du Design tab) ?
→ Utilise le champ CSS personnalisé dans l'onglet Design. Le « Guide des classes CSS » déroulant liste toutes les classes ciblables (ex : .gmbc-wrapper, .gmbc-card-active, .gmbc-badge-open). Tu peux y mettre du CSS arbitraire qui s'applique dans le Shadow DOM du widget.
Mes pages votre site générées par le plugin n'apparaissent pas sur Google
→ (1) Vérifie que la sitemap XML de votre site inclut le CPT gmbclco_location (Yoast / Rank Math l'incluent par défaut). (2) Soumets l'URL d'archive /etablissements/ à Google Search Console pour accélérer l'indexation. (3) Le SEO local prend 4-8 semaines à se stabiliser après création.