Store Locator: un mapa interactivo de tus establecimientos en tu sitio web
Para quién es: gestionas varios establecimientos dentro de la misma marca (franquicia, multisede, cadena) y quieres mostrarlos en un mapa interactivo integrado en tu sitio web (WordPress, Wix, cualquier CMS). El widget ofrece búsqueda por ciudad, marcadores, tarjetas con horarios de apertura y un botón directo "Directions".
Lo que vas a hacer: activar el Store Locator para tu marca, configurarlo (design, features, SEO, embed), integrarlo en tu sitio y usar el plugin GMB Club Connect GMB Connect para obtener páginas SEO automáticas por establecimiento.
Visión general
El Store Locator es un widget JavaScript (Web Component, ~58 KB gzipped) que copias y pegas en cualquier página web. Este:
- Muestra tus establecimientos en un mapa (Leaflet + MapTiler)
- Permite la búsqueda por ciudad (con geocodificación Nominatim)
- Detecta la geolocalización del visitante (con su consentimiento)
- Muestra para cada establecimiento: foto, dirección, horarios de apertura, insignia Open/Closed calculada en el servidor, valoración de Google, enlace de indicaciones
- Es personalizable: colores, fuentes, sombras, CSS personalizado
En WordPress, el plugin GMB Club Connect (ya necesario para Artículos) añade:
- Un shortcode
[gmbclco_store_locator]para colocar donde quieras - Páginas SEO autogeneradas para cada establecimiento (CPT + Schema.org LocalBusiness + BreadcrumbList JSON-LD)
- Sincronización automática de establecimientos cada 6 h vía WP-Cron
Requisitos previos
| Elemento | Detalle |
|---|---|
| Marca activa | El Store Locator se configura a nivel de marca, no de establecimiento (un mapa por marca). |
| Establecimientos existentes | Al menos 1 establecimiento con una ficha de Google conectada (de lo contrario el mapa está vacío). Idealmente 2 o más para que el store locator tenga sentido. |
| Direcciones correctas | Cada establecimiento debe tener una dirección rellenada (de lo contrario, ningún marcador). |
Paso 1 — Activar el Store Locator
Ve a "Settings" (arriba a la derecha mediante el selector Sphere › Bubble), luego en el menú de la izquierda haz clic en "Sphere settings" abajo, y finalmente en la entrada "Store Locator" (bajo ORGANIZATION en el menú de la izquierda).
Verás:
- Encabezado "Store Locator" con el subtítulo "Configure the interactive map of your locations"
- El interruptor "Enable Store Locator" (por defecto: OFF con la nota "Store Locator disabled")
Activa el interruptor. Aparece un mensaje de confirmación verde "Configuration saved". La sección "Configuration" se despliega con 4 pestañas: Design, Features, SEO, Embed.
Paso 2 — Configurar el diseño
Pestaña "Design" — controla el aspecto visual del widget.
| Ajuste | Descripción |
|---|---|
| Primary color | Color de los botones CTA, marcadores activos, resaltados. Por defecto, el color de tu marca. |
| Secondary color | Color de acento (hover, insignias secundarias). |
| Marker color | Para los pines del mapa. Puedes establecer un color diferente del primario (p. ej. marcadores rojos sobre una marca azul). |
| Card style | Shadow, Border, Flat — elige cómo se muestran visualmente las tarjetas de establecimiento. |
| Shadow level | Si el estilo = Shadow: None, Subtle, Medium, Strong. |
| Card radius | Control deslizante 0-24px para el border-radius de tarjetas y botones. |
| Main font | Inherit from main font (el widget adopta la font-family de la página anfitriona) o System font (default). |
| Font weight | De 300, Light a 800, Extra-bold para los títulos. |
| Layout | List (barra lateral izquierda con lista vertical) o Grid (tarjetas dispuestas en cuadrícula). |
| Show logo in header | Interruptor para mostrar el logo de la marca en la barra superior del widget. |
| Review CTA text | P. ej. "Your review matters" (visible si activas el CTA de reseña en Features). |
| Review CTA button | P. ej. "Leave a review". |
| Custom CSS | Campo de texto para inyectar CSS avanzado. Consulta el desplegable "CSS classes guide" que enumera cada clase objetivo: .gmbc-wrapper, .gmbc-card, .gmbc-btn-primary, etc. |
Desplazándote más abajo en la pestaña, encontrarás las demás secciones de personalización (Typography, Cards and shapes, Card layout, Map marker, Visible sections on your site pages, Custom CSS) con el botón "Save" al final:
Todos los cambios son inmediatos: guarda, recarga la página donde lo integraste, y los verás.
Paso 3 — Configurar las funciones
Pestaña "Features" — qué comportamientos activar.
| Interruptor | Efecto |
|---|---|
| Search bar | Activa la barra de búsqueda en la parte superior del widget (autocompletado Nominatim) |
| Automatic geolocation | Botón "Locate me" que pide el consentimiento al visitante y centra el mapa en él |
| Open/Closed badge | Muestra una insignia verde "Open" / roja "Closed" en cada tarjeta, calculada en tiempo real a partir de los horarios de apertura de Google y la zona horaria del establecimiento |
| Marker clusters | En lugar de mostrar 50 marcadores uno al lado del otro, los agrupa en un clúster ampliable (útil a partir de 10 establecimientos) |
| Directions button | Genera un enlace directo a Google Maps / Apple Maps desde la ubicación del visitante |
| Google rating on cards | Muestra la valoración media + el número de reseñas (extraído de la ficha de Google del establecimiento) |
| Review CTA on the card | Añade un botón "Leave a review" que abre la página de reseñas de Google del establecimiento |
Desplazándote más abajo también verás "Hours display mode" (Compact (default) / Today / Full) y "Primary button" (Directions / Website / Call):
Categorías
Puedes clasificar tus establecimientos por categoría (p. ej. Restaurant, Bar, Snack) para que los visitantes puedan filtrar el widget. Defines las categorías en esta sección y asignas establecimientos a cada una.
Útil para marcas mixtas: si dentro de la marca "Food'Alexandre" tienes tanto restaurantes como food trucks, los visitantes pueden filtrar para ver solo lo que les interesa.
Paso 4 — Configurar el SEO
Pestaña "SEO" — solo útil si usas el plugin GMB Club Connect GMB Connect que genera páginas dedicadas por establecimiento.
| Campo | Descripción |
|---|---|
| Index page title | El H1 de la página que lista todos tus establecimientos (p. ej. Our locations) |
| Page slug | Slug de la URL de esta página índice (our-locations por defecto, autogenerado si está vacío) |
| Page title template | Para las páginas individuales de establecimiento. Variables: {bulle_name}, {sphere_name}, {city}. P. ej. {bulle_name} - {sphere_name} |
| Meta description template | Para el <meta name="description">. P. ej. Find {bulle_name} in {city}. |
Nota: Estas plantillas se usan para generar páginas SEO en tu sitio. Haz clic en "Save" para guardar.
Paso 5 — Integrar el widget en tu sitio
Pestaña "Embed" — obtén el código para copiar y pegar.
El botón "Start integration" abre el asistente que genera el fragmento HTML para copiar y pegar en tu sitio.
Obtienes un bloque de código listo para usar:
<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 | Descripción |
|---|---|
<script src= | Carga el widget async/defer. Mejor colocarlo en el <head> o justo antes de </body>. |
<gmbclo-store-locator> | Custom Web Component. Colócalo donde quieras que aparezca el mapa en tu página. |
api-key | Clave pública generada para tu marca. Visible en tu página de Settings. Nota de seguridad: la clave es de solo lectura, sin riesgo si está en HTML público. |
sphere-id | UUID de tu marca, autogenerado. |
El botón "Copy" copia todo al portapapeles.
Consejo CMS: en tu sitio, NO uses este fragmento — usa en su lugar el shortcode del plugin GMB Connect (ver más abajo). En Wix o Webflow, usa un bloque HTML/Embed con este fragmento.
Para tu sitio: el plugin GMB Club Connect
Si ya has instalado el plugin GMB Club Connect (para los artículos), el Store Locator está disponible gratis como módulo.
Activar el módulo Store Locator en el plugin
- Ve al admin de tu sitio → Plugins › GMB Club Connect › Settings
- Activa la sección "Store Locator"
- El plugin sincroniza automáticamente tus establecimientos con GMB Club (cada 6 h, o manualmente mediante el botón "Sync now")
Usar el shortcode
Edita la página donde quieres mostrar el mapa (p. ej. la página "Our locations") e inserta:
[gmbclco_store_locator]
Puedes pasar parámetros:
[gmbclco_store_locator height="600px" zoom="11" category="restaurant"]
| Parámetro | Significado |
|---|---|
height | Altura del widget (por defecto: 700px) |
zoom | Zoom inicial del mapa (por defecto: 6 para una vista de toda Francia) |
category | Restringe la visualización a una categoría (slug) |
Páginas SEO autogeneradas
Una vez activado el plugin, crea automáticamente:
- Un Custom Post Type
gmbclco_location(una URL por establecimiento) - Una taxonomía
gmbclco_location_city(agrupación por ciudad) - Plantillas de página: página individual (
single-gmbclco_location.php) + archivo de ciudad
Así, un establecimiento "Food'Alexandre Lyon Bellecour" se convierte automáticamente en una página de tu sitio en la URL yoursite.com/locations/lyon/foodalexandre-lyon-bellecour con:
- Título H1 = nombre del establecimiento
- Mapa centrado solo en el establecimiento
- Bloque de información (dirección, teléfono, sitio web, ficha de Google)
- Bloque de horarios semanales
- Bloque CTA (dejar una reseña, ver indicaciones)
- Miga de pan (
Home › Locations › Lyon › Food'Alexandre Lyon Bellecour) - Schema.org JSON-LD (LocalBusiness + BreadcrumbList)
Impacto SEO: estas páginas individuales posicionan para búsquedas geolocalizadas (
food alexandre lyon) y el Schema.org mejora tu aparición en el local pack de Google.
Lo que ve tu cliente final
Cuando se carga la página que contiene el widget, tu visitante ve:
- Un mapa centrado (en todos tus establecimientos, o en su geolocalización si la permite)
- Una barra de búsqueda por ciudad/dirección en la parte superior
- Una lista de tarjetas a la izquierda (o una cuadrícula) con: nombre, dirección, distancia, insignia Open/Closed, valoración de Google ★
- Al hacer clic en una tarjeta: el mapa hace zoom sobre el marcador, la tarjeta se abre con los horarios completos, contacto, enlace al sitio web, botón "Directions"
El rendimiento es rápido (~58 KB, geolocalización del lado del navegador, geocodificación proxificada a través de GMB Club con una caché Redis de 24 h para preservar la cuota de Nominatim).
Flujo de trabajo recomendado
- Activar el Store Locator (
Sphere settings › Store Locator › toggle) - Configurar Design para que coincida con tu marca (colores, fuentes, sombras)
- Configurar Features (activar como mínimo: Search, Geoloc, Open/Closed badge, Directions)
- Si usas tu sitio → activar el plugin + rellenar la pestaña SEO para las plantillas de URL/título
- Prueba: integra en una página borrador de tu sitio → comprueba que cada establecimiento aparece, que los horarios son correctos, que las indicaciones funcionan
- Publicar la página en tu sitio
Problemas comunes
Mis establecimientos no aparecen en el mapa → Tres causas: (1) no tienen dirección — ve al establecimiento → Settings › Information. (2) la geocodificación falló — asegúrate de que la dirección es válida y limpia (sin errores tipográficos). (3) la caché Redis tarda 24 h en actualizarse — espera o contacta con el soporte para purgarla.
La insignia Open/Closed es incorrecta
→ Comprueba la zona horaria de la marca en Settings › General (p. ej. Europe/Paris (GMT+2)). La insignia se calcula en el servidor a partir de esta zona horaria + los horarios de apertura de Google del establecimiento.
El widget no carga, la consola JS muestra un error 401
→ Tu clave de acceso es inválida o está revocada. Ve a Settings › your site Plugin › API Keys (sí, ahí es donde están), regenera una clave. Actualiza el fragmento en tu sitio.
El widget funciona en local pero no en producción
→ Comprueba el CORS: el widget llama a https://app.gmb-club.com/api/v2/store-locator/.... Si tienes un firewall que bloquea, permite este dominio.
El plugin GMB Club Connect no sincroniza los establecimientos
→ Ve al plugin → botón "Sync now". Si falla, comprueba el estado de emparejamiento en Settings › your site Plugin. Reconecta si es necesario.
¿Cómo aplico un estilo profundo al widget (más allá de las opciones de la pestaña Design)?
→ Usa el campo Custom CSS de la pestaña Design. El desplegable "CSS classes guide" enumera cada clase objetivo (p. ej. .gmbc-wrapper, .gmbc-card-active, .gmbc-badge-open). Puedes poner CSS arbitrario ahí y se aplicará dentro del Shadow DOM del widget.
Mis páginas de tu sitio generadas por el plugin no aparecen en Google
→ (1) Asegúrate de que el sitemap XML de tu sitio incluye el CPT gmbclco_location (Yoast / Rank Math lo incluyen por defecto). (2) Envía la URL del archivo /locations/ a Google Search Console para acelerar la indexación. (3) El SEO local tarda 4-8 semanas en estabilizarse tras la creación.