Store Locator: an interactive map of your locations on your website
Who this is for: you manage several locations inside the same sphere (franchise, multi-site, chain) and you want to display them on an interactive map embedded on your website (WordPress, Wix, any CMS). The widget offers city search, markers, cards with opening hours, and a direct "Directions" button.
What you'll do: enable the Store Locator for your sphere, configure it (design, features, SEO, embed), embed it on your site, and use the GMB Club Connect plugin GMB Connect to get automatic SEO pages per location.
Overview
The Store Locator is a JavaScript widget (Web Component, ~58 KB gzipped) that you copy-paste into any web page. It:
- Shows your bubbles on a map (Leaflet + MapTiler)
- Allows search by city (with Nominatim geocoding)
- Detects the visitor's geolocation (with their consent)
- Displays for each location: photo, address, opening hours, Open/Closed badge computed server-side, Google rating, directions link
- Is customizable: colors, fonts, shadows, custom CSS
On WordPress, the GMB Club Connect plugin (already required for Articles) adds:
- A shortcode
[gmbclco_store_locator]to drop wherever you want - Auto-generated SEO pages for each location (CPT + Schema.org LocalBusiness + BreadcrumbList JSON-LD)
- Automatic bubble sync every 6h via WP-Cron
Prerequisites
| Item | Detail |
|---|---|
| Active sphere | Store Locator is configured at the Sphere level, not Bubble (one map per sphere). |
| Existing bubbles | At least 1 bubble with a connected GMB listing (otherwise the map is empty). Ideally 2+ for the store locator to make sense. |
| Correct addresses | Each bubble must have a filled-in address (otherwise no marker). |
Step 1 — Enable the Store Locator
Go to "Settings" (top right via the Sphere › Bubble selector), then in the left menu click "Sphere settings" at the bottom, and finally on the "Store Locator" entry (under ORGANIZATION in the left menu).
You'll see:
- Header "Store Locator" with the subtitle "Configure the interactive map of your locations"
- The "Enable Store Locator" toggle (default: OFF with the note "Store Locator disabled")
Flip the toggle. A green confirmation message "Configuration saved" appears. The "Configuration" section unfolds with 4 tabs: Design, Features, SEO, Embed.
Step 2 — Configure the design
Tab "Design" — controls the visual look of the widget.
| Setting | Description |
|---|---|
| Primary color | Color of CTA buttons, active markers, highlights. Defaults to your brand color. |
| Secondary color | Accent color (hover, secondary badges). |
| Marker color | For the pins on the map. You can set a different color from your primary (e.g. red markers on a blue brand). |
| Card style | Shadow, Border, Flat — choose how location cards render visually. |
| Shadow level | If style = Shadow: None, Subtle, Medium, Strong. |
| Card radius | Slider 0-24px for the border-radius of cards and buttons. |
| Main font | Inherit from main font (widget picks up the host page's font-family) or System font (default). |
| Font weight | 300, Light to 800, Extra-bold for headings. |
| Layout | List (left sidebar with vertical list) or Grid (cards laid out as a grid). |
| Show logo in header | Toggle to display the sphere logo in the widget's top bar. |
| Review CTA text | E.g. "Your review matters" (visible if you enable the review CTA in Features). |
| Review CTA button | E.g. "Leave a review". |
| Custom CSS | Text field to inject advanced CSS. See the "CSS classes guide" dropdown that lists every targetable class: .gmbc-wrapper, .gmbc-card, .gmbc-btn-primary, etc. |
Scrolling further down the tab, you'll find the other customization sections (Typography, Cards and shapes, Card layout, Map marker, Visible sections on your site pages, Custom CSS) with the "Save" button at the bottom:
All changes are immediate: save, reload the page where you embedded it, you'll see them.
Step 3 — Configure the features
Tab "Features" — which behaviors to enable.
| Toggle | Effect |
|---|---|
| Search bar | Enables the search bar at the top of the widget (Nominatim autocomplete) |
| Automatic geolocation | "Locate me" button that asks the visitor for consent and centers the map on them |
| Open/Closed badge | Displays a green "Open" / red "Closed" badge on each card, computed in real time from Google opening hours and the bubble's timezone |
| Marker clusters | Instead of showing 50 markers side by side, group them into a zoomable cluster (useful above 10 bubbles) |
| Directions button | Generates a deep link to Google Maps / Apple Maps from the visitor's location |
| Google rating on cards | Displays the average rating + review count (pulled from the bubble's GMB listing) |
| Review CTA on the card | Adds a "Leave a review" button that opens the bubble's Google Reviews page |
Scrolling further you'll also see "Hours display mode" (Compact (default) / Today / Full) and "Primary button" (Directions / Website / Call):
Categories
You can classify your bubbles by category (e.g. Restaurant, Bar, Snack) so visitors can filter the widget. You define the categories in this section and assign bubbles to each.
Useful for mixed spheres: if inside the "Food'Alexandre" sphere you have both restaurants and food trucks, visitors can filter to see only what they care about.
Step 4 — Configure SEO
Tab "SEO" — only useful if you use the GMB Club Connect plugin GMB Connect which generates dedicated pages per bubble.
| Field | Description |
|---|---|
| Index page title | The H1 of the page listing all your locations (e.g. Our locations) |
| Page slug | Slug of this index page URL (our-locations by default, auto-generated if empty) |
| Page title template | For individual bubble pages. Variables: {bulle_name}, {sphere_name}, {city}. E.g. {bulle_name} - {sphere_name} |
| Meta description template | For the <meta name="description">. E.g. Find {bulle_name} in {city}. |
Note: These templates are used to generate SEO pages on your site. Click "Save" to save.
Step 5 — Embed the widget on your site
Tab "Embed" — grab the code to copy-paste.
The "Start integration" button opens the assistant that generates the HTML snippet to copy-paste onto your site.
You get a ready-to-use code block:
<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 | Description |
|---|---|
<script src= | Loads the widget async/defer. Best placed in the <head> or just before </body>. |
<gmbclo-store-locator> | Custom Web Component. Place it where you want the map to appear on your page. |
api-key | Public key generated for your sphere. Visible in your Settings page. Security note: the key is read-only, no risk if it sits in public HTML. |
sphere-id | UUID of your sphere, auto-generated. |
The "Copy" button copies everything to the clipboard.
CMS tip: on your site, do NOT use this snippet — use the GMB Connect plugin shortcode instead (see below). On Wix or Webflow, use an HTML/Embed block with this snippet.
For your site: the GMB Club Connect plugin
If you've already installed the GMB Club Connect plugin (for articles), the Store Locator is available for free as a module.
Enable the Store Locator module in the plugin
- Go to your site admin → Plugins › GMB Club Connect › Settings
- Enable the "Store Locator" section
- The plugin automatically syncs your bubbles with GMB Club (every 6h, or manually via the "Sync now" button)
Use the shortcode
Edit the page where you want to display the map (e.g. "Our locations" page) and insert:
[gmbclco_store_locator]
You can pass parameters:
[gmbclco_store_locator height="600px" zoom="11" category="restaurant"]
| Param | Meaning |
|---|---|
height | Widget height (default: 700px) |
zoom | Initial map zoom (default: 6 for a France-wide view) |
category | Restricts display to a category (slug) |
Auto-generated SEO pages
Once the plugin is enabled, it automatically creates:
- A Custom Post Type
gmbclco_location(one URL per bubble) - A taxonomy
gmbclco_location_city(grouping by city) - Page templates: individual page (
single-gmbclco_location.php) + city archive
So a bubble "Food'Alexandre Lyon Bellecour" automatically becomes a your site page at the URL yoursite.com/locations/lyon/foodalexandre-lyon-bellecour with:
- H1 title = bubble name
- Map centered on the bubble only
- Info block (address, phone, website, Google listing)
- Weekly hours block
- CTA block (leave a review, see directions)
- Breadcrumb (
Home › Locations › Lyon › Food'Alexandre Lyon Bellecour) - Schema.org JSON-LD (LocalBusiness + BreadcrumbList)
SEO impact: these individual pages rank for geo-targeted searches (
food alexandre lyon) and the Schema.org boosts your appearance in Google's local pack.
What your end customer sees
When the page containing the widget loads, your visitor sees:
- A centered map (on all your bubbles, or on their geolocation if they allow it)
- A city/address search bar at the top
- A list of cards on the left (or a grid) with: name, address, distance, Open/Closed badge, Google rating ★
- Clicking a card: the map zooms in on the marker, the card opens with full hours, contact, website link, "Directions" button
Performance is fast (~58 KB, browser-side geolocation, geocoding proxied through GMB Club with a Redis cache of 24h to save the Nominatim quota).
Recommended workflow
- Enable the Store Locator (
Sphere settings › Store Locator › toggle) - Configure Design to match your brand (colors, fonts, shadows)
- Configure Features (enable at minimum: Search, Geoloc, Open/Closed badge, Directions)
- If you use your site → enable the plugin + fill in the SEO tab for the URL/title templates
- Test: embed on a draft page on your site → check that every bubble shows up, that hours are correct, that directions work
- Publish the page on your site
Common issues
My bubbles don't show up on the map → Three causes: (1) they don't have an address — go to the bubble → Settings › Information. (2) geocoding failed — make sure the address is valid and clean (no typos). (3) the Redis cache takes 24h to refresh — wait or contact support to purge.
The Open/Closed badge is wrong
→ Check the timezone of the sphere in Settings › General (e.g. Europe/Paris (GMT+2)). The badge is computed server-side from this timezone + the bubble's Google opening hours.
The widget doesn't load, JS console shows a 401 error
→ Your access key is invalid or revoked. Go to Settings › your site Plugin › API Keys (yes, that's where they live), regenerate a key. Update the snippet on your site.
The widget works locally but not in production
→ Check CORS: the widget calls https://app.gmb-club.com/api/v2/store-locator/.... If you have a firewall blocking, allow this domain.
The GMB Club Connect plugin doesn't sync bubbles
→ Go to the plugin → "Sync now" button. If it fails, check the pairing status in Settings › your site Plugin. Reconnect if needed.
How do I deeply style the widget (beyond the Design tab options)?
→ Use the Custom CSS field in the Design tab. The "CSS classes guide" dropdown lists every targetable class (e.g. .gmbc-wrapper, .gmbc-card-active, .gmbc-badge-open). You can put arbitrary CSS in there and it will apply inside the widget's Shadow DOM.
My your site pages generated by the plugin don't appear on Google
→ (1) Make sure the your site XML sitemap includes the gmbclco_location CPT (Yoast / Rank Math include it by default). (2) Submit the /locations/ archive URL to Google Search Console to speed up indexing. (3) Local SEO takes 4-8 weeks to stabilize after creation.