> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-map.md). # AX - Mapa ## Resumen **AX - Mapa** es un componente de Experience Cloud que muestra registros de Salesforce como marcadores de ubicación interactivos en las páginas de Experience Sites. Úsalo para mostrar a los usuarios del portal ubicaciones basadas en campos de dirección o coordenadas de latitud/longitud, como ubicaciones de servicio cercanas, sitios de clientes, resultados del localizador de tiendas o sedes de eventos. Los usuarios pueden hacer clic en los marcadores para ver los detalles del registro y navegar a los registros. Obtén datos de ubicación de cualquier objeto estándar o personalizado en Experience Builder. Perfecto para localizadores de tiendas, mapas de territorios de servicio, buscadores de ubicaciones de eventos, vistas de proximidad de clientes o cualquier lugar donde los usuarios del portal necesiten visualizar datos geográficos. {% hint style="success" %} El Avonni Map es un [Componente de datos reactivo](/experience-cloud/experience-cloud-es/primeros-pasos/reactive-components.md) {% endhint %} *** ## Primeros pasos Usa este sencillo tutorial para aprender lo básico del componente Mapa y empezar a crear tus casos de uso. {% @arcade/embed url="" flowId="ZiiaXHHeJ3PWe6UcgYBN" %} *** ## Tutoriales | Nombre | Descripción | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | | [**Configura el mapa para mostrar información de detalles del registro**](/experience-cloud/experience-cloud-es/tutoriales/components/map/set-up-the-map-to-show-record-details-information.md) | Aprende a mostrar registros en Experience Cloud usando Avonni Map. | *** ## Configuración del mapa Comprender el proceso de configuración, especialmente las secciones Fuente de datos y Asignaciones de datos, es crucial para usar este componente de manera eficaz. ### Configuración de la fuente de datos La sección Fuente de datos es donde conectas el Avonni Map con tus datos de Salesforce. Tienes dos opciones.
| Tipo de origen de datos | Descripción | Caso de uso | | -------------------------- | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | | **Origen de datos manual** | Introduce manualmente los datos en la tabla de datos. | Ideal para datos no dinámicos, pruebas y demostraciones. | | **Consulta** | Crea una consulta para rellenar automáticamente la tabla con datos de Salesforce. | Adecuado para conjuntos de datos dinámicos, en tiempo real y de gran tamaño. | ### Configuración de asignaciones de datos En la sección Asignaciones de datos, puedes activar tu componente Mapa especificando cómo deben asignarse los campos. Esto implica alinear campos, como las coordenadas de ubicación de tu configuración de Fuente de datos, con los atributos relevantes del mapa.
Compartición del modelo de datos con Avonni Map **Cumplimiento de las reglas de compartición de datos de Salesforce:** * **Respeto por la configuración de la organización:** Los componentes de Avonni cumplen totalmente con las configuraciones de compartición de datos y los ajustes de acceso existentes de tu organización de Salesforce. * **Política de no interferencia:** Estos componentes no modifican ni afectan de ninguna manera tus reglas de compartición de datos preestablecidas. * **Visibilidad y acceso controlados:** La capacidad de ver e interactuar con los registros a través de los componentes de Avonni está regida por la configuración de compartición y los permisos de usuario definidos por tu organización
Debes centrarte en la sección Ubicación para asegurarte de que tus Asignaciones de datos estén configuradas correctamente, especialmente al asignar ubicaciones. He aquí por qué: 1. **Configuración de las asignaciones de datos**: Para asegurarte de que el componente Mapa muestre la información correcta, debes asignar los campos de datos de Salesforce a sus etiquetas de ubicación correspondientes. Por ejemplo, asignarás un campo de Salesforce que contenga direcciones de calle a la etiqueta 'street' en el componente Mapa, nombres de ciudad a la etiqueta 'city', y así sucesivamente. 2. **Importancia de la precisión**: Las asignaciones precisas son vitales. El componente Mapa podría mostrar información incorrecta si el campo de Salesforce equivocado se asigna a una etiqueta de ubicación. Por ejemplo, si el campo 'city' se asigna incorrectamente a la etiqueta 'postal code', el mapa podría mostrar una ubicación en una ciudad completamente diferente o incluso en un país distinto.
#### Filtros El atributo Filtros te permite elegir campos específicos para filtrar y refinar los marcadores mostrados en el componente de mapa.
### Otros ajustes #### Vista de lista Esta función muestra u oculta la lista de ubicaciones. Los valores válidos son visible, oculto o auto. Este valor predeterminado es auto, que muestra la lista solo cuando hay varios marcadores presentes. #### Nivel de zoom En el componente de mapa, puedes ajustar el nivel de zoom para centrarte en diferentes áreas, desde el mundo hasta edificios individuales. Si no estableces un nivel de zoom, el mapa se ajustará automáticamente para mostrar todos los marcadores que hayas colocado en él.
El panel Propiedades tiene una opción para establecer el zoom manualmente. Los niveles de zoom van de 1 a 22 en navegadores de escritorio y de 1 a 20 en dispositivos móviles. Aquí tienes una guía rápida de lo que generalmente muestra cada nivel de zoom: * Nivel 1: El mundo entero * Nivel 5: Un continente o una gran masa terrestre * Nivel 10: Una ciudad * Nivel 15: Detalles a nivel de calle * Nivel 20: Edificios individuales Consulta la documentación de la API de Google Maps sobre [Niveles de zoom](https://developers.google.com/maps/documentation/javascript/overview#zoom-levels) para obtener información más detallada. #### Comportamiento de la interfaz del componente Mapa
Estos ajustes te permiten controlar cómo interactúan los usuarios con el mapa, proporcionando una experiencia de usuario más ágil y centrada. Desde desactivar funciones específicas de zoom y arrastre hasta añadir funciones valiosas como una barra de búsqueda o un pie de página, cada ajuste tiene un propósito distinto:
ConfiguraciónDescripción
Desactivar arrastreEvita mover el mapa mediante clic y arrastre, manteniéndolo en una posición fija.
Ocultar controles de zoomElimina los controles de acercar/alejar, manteniendo un nivel de zoom constante en el mapa.
Desactivar zoom con la rueda del ratónImpide que el mapa acerque o aleje con la rueda del ratón, garantizando un nivel de zoom estable.
Desactivar zoom con doble clicDesactiva el zoom al hacer doble clic en el mapa, manteniendo un nivel de zoom fijo.
Desactivar la interfaz predeterminadaElimina elementos estándar de la interfaz del mapa, como el selector de Street View, proporcionando una visualización más limpia.
Mostrar pie de páginaMuestra un pie de página en el mapa para información adicional, como fuentes de datos del mapa o una leyenda.
BuscableAñade una barra de búsqueda al mapa, permitiendo a los usuarios encontrar y acercarse fácilmente a ubicaciones o puntos específicos.
#### Ubicación del centro del mapa Cuando hay varios marcadores en el mapa, se centrará automáticamente en un punto central cercano al centro de todos los marcadores. Calcula este punto en función de sus ubicaciones.
*** ## Interacciones Para el componente Mapa, cuenta con una interacción "al seleccionar". Esta función te permite especificar qué acción debe ocurrir cuando los usuarios hacen clic en un marcador del mapa.
Tipo de interacciónDescripción
Mostrar notificación emergenteMuestra una breve notificación emergente en la pantalla, proporcionando una respuesta rápida o información después de hacer clic en un marcador de mapa.
NavegarRedirige al usuario a una página diferente de tu sitio o URL, guiándolo hacia información más detallada sobre la ubicación en la que hizo clic.
Abrir modal de alertaAbre una ventana modal con un mensaje de alerta, presentando información importante o advertencias sobre la ubicación seleccionada.
Abrir confirmaciónActiva un cuadro de diálogo de confirmación, usado para acciones que requieren confirmación adicional del usuario, como la asistencia a un evento.
Abrir diálogo de flujoAbre un diálogo que ejecuta un flujo de Salesforce, iniciando flujos de trabajo o procesos relacionados con la ubicación en la que se hizo clic.
*** ## Configuración {% tabs %} {% tab title="🎛️ Propiedades" %} | Nombre | Descripción | | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Título de la lista** | Establece un título para tu lista del mapa. | | **Vista de lista** |

Esta función es especialmente útil para que los usuarios vean una lista detallada de los lugares o elementos del mapa.

| | **Nivel de zoom** |

Los niveles de zoom van de 1 a 22 en navegadores de escritorio y de 1 a 20 en dispositivos móviles.

Aquí tienes una guía rápida de lo que generalmente muestra cada nivel de zoom:

| | **Desactivar arrastre** | Evita que los usuarios arrastren la vista del mapa. | | **Ocultar controles de zoom** | Elimina los controles de acercar/alejar del mapa | | **Desactivar zoom con la rueda del ratón** | Desactiva el zoom usando la rueda de desplazamiento del ratón | | **Desactivar doble clic** | Evita que al hacer doble clic se acerque el mapa | | **Desactivar la interfaz predeterminada** | Elimina la interfaz estándar de Google Maps para un aspecto más limpio | | **Mostrar pie de página** | Añade una sección de pie de página al componente Mapa | | **Buscable** | Habilita una función de búsqueda dentro del mapa | | **Fuente de datos** | | | **Ubicación del centro del mapa** | Especifica el punto central inicial del mapa | | **Opciones de filtrado** | Configura filtros para el mapa, mostrados como un popover | | **Opciones del motor de búsqueda** | | | **Tamaño** |

"Desbordamiento" se refiere a cómo se maneja o muestra el contenido que excede los límites de su contenedor. Cuando el contenido dentro de un componente de diseño es demasiado grande para ajustarse a las dimensiones asignadas (alto y ancho), la configuración de desbordamiento determina qué sucede con el contenido sobrante.

| | {% endtab %} | | {% tab title="🎨 Estilo" %} {% endtab %} {% endtabs %} *** ## Ejemplos de casos de uso ### Ejemplo 1 : Mapa reactivo de cuentas {% @arcade/embed url="" flowId="Dxon9206UTTMphdamjrL" %} Da vida a tus datos de cuentas con un mapa interactivo que responde al instante a las selecciones del usuario. Al conectar el componente Mapa con tu Tabla de datos de cuentas, puedes mostrar ubicaciones exactas de facturación en el momento en que un representante hace clic en cualquier registro de cuenta. *** #### **Lo que lograrás** * **Mapeo contextual:** El mapa se actualiza automáticamente para mostrar la ubicación de facturación de la cuenta seleccionada según la elección del representante en la tabla de datos * **Navegación de cuentas optimizada:** Los representantes pueden localizar visualmente las cuentas sin salir nunca de la página *** #### **Antes de empezar** * **Componente Tabla de datos de cuentas:** Asegúrate de que ya haya un componente Tabla de datos de cuentas colocado en la página con el nombre de API `AccountsTable` *** #### **Cómo configurarlo** {% stepper %} {% step %} #### **Añade el componente Mapa** * Arrastra el componente AX – Map al lienzo de Experience Builder {% endstep %} {% step %} #### **Configura el componente** * Establece el nombre de API en `MapAccount` * Establece el tipo en `Leaflet` {% endstep %} {% step %} #### **Establece una fuente de datos** * Crea una consulta en el objeto Account * Aplica el siguiente filtro: Id = `{{AccountsTable.selectedRecord.Id}}` {% endstep %} {% step %} #### **Configura las asignaciones de datos** * Establece el título en `Nombre de la cuenta` * En Ubicación, establece Latitud en `Latitud de facturación` y Longitud en `Longitud de facturación` {% endstep %} {% step %} #### **Previsualiza tu trabajo** * Inicia la vista previa, selecciona un registro en la Tabla de datos de cuentas y confirma que el mapa se actualiza para reflejar la ubicación de facturación correspondiente {% endstep %} {% endstepper %} ### Ejemplo 2 : Seguimiento de pedidos de clientes {% @arcade/embed url="" flowId="tiVuRRBHNCbcUb5qoGQL" %} Ofrece a tus clientes visibilidad en tiempo real sobre dónde están sus pedidos. Al asignar datos de geolocalización directamente desde el objeto Pedido, puedes crear una experiencia de seguimiento transparente e intuitiva que mantenga informados a los clientes en cada paso del proceso. *** #### **Lo que lograrás** * **Visibilidad del pedido en tiempo real:** Los clientes pueden ver la ubicación actual de su pedido trazada en un mapa interactivo * **Confianza a través de la transparencia:** Una experiencia de seguimiento clara y visual reduce las consultas de soporte y mejora la satisfacción del cliente *** #### **Antes de empezar** * **Campo de geolocalización personalizado:** Asegúrate de haber creado un campo de Geolocalización personalizado en el objeto Pedido para almacenar coordenadas de seguimiento en tiempo real *** #### **Cómo configurarlo** {% stepper %} {% step %} #### **Añade el componente Mapa** * Arrastra el componente AX – Map al lienzo de Experience Builder {% endstep %} {% step %} #### **Configura el componente** * Establece el nombre de API en `TrackingMap` * Establece el tipo en `Mapa de Leaflet` {% endstep %} {% step %} #### **Establece una fuente de datos** * Crea una consulta en el objeto Pedido {% endstep %} {% step %} #### **Configura las asignaciones de datos** * Establece el título en `Número de pedido` * Establece el tipo en `Pin` * En Ubicación, establece Latitud en `Geolocalización de seguimiento (Latitud)` y Longitud en `Geolocalización de seguimiento (Longitud)` {% endstep %} {% step %} #### **Previsualiza tu trabajo** * Inicia la vista previa y verifica que cada pedido aparezca como un pin en el mapa en su ubicación de seguimiento correcta {% endstep %} {% endstepper %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-map.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.