> 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/tutoriales/reactive-components/linking-data-table-and-map-for-dynamic-locations.md).
# Vincular una tabla de datos y un mapa para ubicaciones dinámicas
## Resumen
Esta guía explica cómo conectar un componente Avonni Data Table y un componente Avonni Map en su sitio de Experience Cloud para crear una visualización dinámica e interactiva. Al vincular los dos componentes, seleccionar una cuenta en la Data Table actualiza el mapa para mostrar las ubicaciones relacionadas, mejorando la participación del usuario.
### Beneficios
Vincular estos componentes permite que su sitio responda a las selecciones del usuario en tiempo real, proporcionando una forma enfocada e intuitiva de explorar las ubicaciones de las cuentas sin actualizaciones manuales.
## Configuración de la integración
### **Configuración de la Data Table**
{% stepper %}
{% step %}
#### Añada el componente Data Table
* Coloque un componente Avonni Data Table en su página de Experience Cloud para mostrar información de la cuenta.
* *¿Por qué?* La Data Table sirve como punto de partida, mostrando detalles de la cuenta para que el usuario los seleccione
{% endstep %}
{% step %}
#### Asigne un nombre a la Data Table
* En el panel de propiedades de la Data Table, establezca el **Nombre de API** en `accountsDatatable`.
* *¿Por qué?* El nombre de API actúa como un identificador único, lo que permite que otros componentes (como el mapa) lo reconozcan y reaccionen a él.
{% endstep %}
{% step %}
#### Limitar a una sola selección
* En las propiedades de la Data Table, busque la **Máxima selección de filas** configuración y establézcala en `1.`
* *¿Por qué?* Limitar a una sola fila garantiza que el mapa muestre ubicaciones de una sola cuenta, manteniendo la experiencia clara y enfocada.
{% endstep %}
{% endstepper %}
### Configuración de Avonni Map
{% stepper %}
{% step %}
#### Añada el componente Map
* Coloque un componente Avonni Map en la misma página (por ejemplo, nómbrelo `relatedLocationsMap`).
* *¿Por qué?* El mapa mostrará datos de ubicación según la cuenta seleccionada.
{% endstep %}
{% step %}
#### Establezca la fuente de datos
* En el panel de propiedades del mapa, vaya a la **Fuente de datos** sección.
* Selecciona **Consultar la fuente de datos** y elija el **Cuenta** objeto (o el objeto con datos de ubicación).
* *¿Por qué?* La consulta obtiene datos de ubicación dinámicamente desde Salesforce
{% endstep %}
{% step %}
#### Filtrar los resultados
* Añada una condición de filtro en la configuración de la consulta:
* ¿Por qué esto? Este filtro garantiza que el mapa muestre solo las ubicaciones vinculadas a la cuenta seleccionada en la Data Table, utilizando el ID del registro seleccionado
| Campo | Operador | Valor |
| ------------- | -------- | ----------------------------------------- |
| ID de cuenta | Igual a | `{{accountsDatatable.selectedRecord.Id}}` |
| {% endstep %} | | |
{% step %}
#### Asigne los campos
* Configure el mapa para mostrar marcadores de ubicación asignando campos (por ejemplo, establezca `Latitud` y `Longitud` los campos del objeto Cuenta o de un objeto relacionado).
* *¿Por qué?* Una asignación correcta de campos le indica al mapa dónde colocar los marcadores según los datos consultados.
{% endstep %}
{% endstepper %}
## Resultado
Cuando un usuario selecciona una cuenta en la Data Table, el mapa se actualiza automáticamente para mostrar solo las ubicaciones asociadas con esa cuenta. Esto crea una experiencia fluida e interactiva, que permite a los visitantes explorar los datos de forma eficiente.
## Solución de problemas comunes
* **El mapa no se actualiza:** Asegúrese de que el nombre de API accountsDatatable coincida exactamente y de que Max Row Selection esté establecido en 1. Revise la sintaxis del filtro ({{accountsDatatable.selectedRecord.Id}}).
* **No se muestran ubicaciones:** Verifique que el objeto Cuenta o el objeto relacionado tenga campos de latitud y longitud, y confirme que la consulta devuelve datos.
* **Problemas de rendimiento:** Simplifique la consulta o reduzca la cantidad de registros si el mapa carga lentamente.
* **Si los problemas persisten:** Contacta a nuestro equipo de soporte en para obtener ayuda
---
# 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/tutoriales/reactive-components/linking-data-table-and-map-for-dynamic-locations.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.