libreria-astro-lefebvre/src/carbins/Mapa_2026_Girona.ts

Librería de componentes Astro, React y Vue para Lefebvre

import type { ComponentMetadata } from '../interfaces/types';

export const metadata: ComponentMetadata = {
  component_name: 'Mapa_2026_Girona',
  category: 'Contenido de Imagen',
  name: 'Mapa de contacto Google 2026',
  description: 'Sección de contacto con un mapa de Google Maps embebido (no requiere API key) junto a un panel con los datos de contacto: dirección, teléfono, email y horario. El mapa se construye automáticamente a partir de la dirección, o se puede pegar directamente el enlace de "Insertar un mapa" de Google. Incluye botón "Cómo llegar" y structured data schema.org (LocalBusiness + PostalAddress)',
  framework: 'Astro',
  priority: 1,
  tags: ['mapa', 'google maps', 'contacto', 'ubicacion', 'direccion'],
  fields: [
    {
      name: 'title',
      type: 'text',
      help: 'Título de la sección (opcional). Se muestra centrado sobre el mapa',
      label: 'Título',
      mandatory: false,
      example_value: 'Dónde encontrarnos'
    },
    {
      name: 'description',
      type: 'textArea',
      help: 'Texto introductorio opcional que se muestra bajo el título',
      label: 'Descripción',
      mandatory: false,
      example_value: 'Ven a visitarnos o ponte en contacto con nosotros.'
    },
    {
      name: 'address',
      type: 'text',
      help: 'Dirección completa del lugar. Se usa para generar el mapa, el enlace "Cómo llegar" y el structured data. Ejemplo: "Carrer de la Força, 8, 17004 Girona"',
      label: 'Dirección',
      mandatory: true,
      example_value: 'Carrer de la Força, 8, 17004 Girona'
    },
    {
      name: 'embedUrl',
      type: 'textArea',
      help: 'Opcional. Si quieres un mapa más preciso, pega aquí el enlace del campo "src" que aparece en Google Maps > Compartir > Insertar un mapa. Si lo rellenas, tiene prioridad sobre la dirección',
      label: 'Enlace de inserción de Google Maps (opcional)',
      mandatory: false,
      example_value: ''
    },
    {
      name: 'zoom',
      type: 'select',
      help: 'Nivel de zoom del mapa cuando se genera a partir de la dirección. Valores bajos alejan, valores altos acercan. Se ignora si se rellena el enlace de inserción',
      label: 'Zoom del mapa',
      options: ['10', '12', '14', '15', '16', '17', '18'],
      options_labels: ['10 (ciudad)', '12', '14', '15 (barrio)', '16', '17', '18 (calle)'],
      example_value: '15'
    },
    {
      name: 'mapPosition',
      type: 'select',
      help: 'Posición del mapa respecto al panel de datos de contacto en escritorio',
      label: 'Posición del mapa',
      options: ['right', 'left'],
      options_labels: ['Mapa a la derecha', 'Mapa a la izquierda'],
      example_value: 'right'
    },
    {
      name: 'backgroundColor',
      type: 'select',
      help: 'Color de fondo de la sección. "Transparente" hereda el fondo de la página. Si eliges un color, la sección añade padding y bordes redondeados',
      label: 'Color de fondo',
      options: ['transparent', '#F8F8F8', '#F2F2F2', '#DDE0EC', '#262626'],
      options_labels: ['Transparente', 'Gris muy claro', 'Gris claro', 'Azul claro', 'Oscuro'],
      example_value: 'transparent'
    },
    {
      name: 'textColor',
      type: 'text',
      help: 'Color del texto y los iconos en formato hex. Usa un tono oscuro (ej. #262626) sobre fondos claros y uno claro (ej. #f2f3f8) sobre fondos oscuros. El panel de contacto se adapta automáticamente',
      label: 'Color del texto',
      mandatory: false,
      example_value: '#262626'
    },
    {
      name: 'showContactInfo',
      type: 'boolean',
      help: 'Muestra el panel lateral con los datos de contacto. Si se desactiva, el mapa ocupa todo el ancho',
      label: 'Mostrar datos de contacto',
      example_value: true
    },
    {
      name: 'phone',
      type: 'text',
      help: 'Teléfono de contacto. Se muestra como enlace clicable (tel:)',
      label: 'Teléfono',
      mandatory: false,
      example_value: '+34 972 00 00 00'
    },
    {
      name: 'email',
      type: 'text',
      help: 'Email de contacto. Se muestra como enlace clicable (mailto:)',
      label: 'Email',
      mandatory: false,
      example_value: 'contacto@ejemplo.com'
    },
    {
      name: 'schedule',
      type: 'textArea',
      help: 'Horario de atención. Admite varias líneas',
      label: 'Horario',
      mandatory: false,
      example_value: 'Lunes a Viernes: 9:00 - 18:00'
    }
  ]
};