> 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-de/experience-components/ax-map.md). # AX - Karte ## Übersicht **AX - Karte** ist eine Experience-Cloud-Komponente, die Salesforce-Datensätze als interaktive Standortmarker auf Experience-Sites-Seiten anzeigt. Verwenden Sie sie, um Portalbenutzern Standorte auf Basis von Adressfeldern oder Breiten-/Längengradkoordinaten anzuzeigen – etwa nahegelegene Servicestandorte, Kundenseiten, Ergebnisse eines Filialfinders oder Veranstaltungsorte. Benutzer können auf Marker klicken, um Datensatzdetails anzuzeigen und zu Datensätzen zu navigieren. Ziehen Sie Standortdaten aus jedem Standard- oder benutzerdefinierten Objekt in Experience Builder. Perfekt für Filialfinder, Karten von Servicegebieten, Suche nach Veranstaltungsorten, Ansichten zur Kundennähe oder überall dort, wo Portalbenutzer geografische Daten visualisieren müssen. {% hint style="success" %} Die Avonni Map ist eine [Reaktive Datenkomponente](/experience-cloud/experience-cloud-de/erste-schritte/reactive-components.md) {% endhint %} *** ## Erste Schritte Verwenden Sie dieses einfache Tutorial, um die Grundlagen der Kartenkomponente zu erlernen und mit dem Aufbau Ihrer Anwendungsfälle zu beginnen. {% @arcade/embed url="" flowId="ZiiaXHHeJ3PWe6UcgYBN" %} *** ## Anleitungen | Name | Beschreibung | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | | [**Richten Sie die Karte ein, um Details zu Datensätzen anzuzeigen**](/experience-cloud/experience-cloud-de/anleitungen/components/map/set-up-the-map-to-show-record-details-information.md) | Lernen Sie, wie Sie Datensätze in Experience Cloud mit Avonni Map anzeigen. | *** ## Die Karte konfigurieren Das Verständnis des Konfigurationsprozesses, insbesondere der Abschnitte Datenquelle und Datenzuordnungen, ist entscheidend, um diese Komponente effektiv zu nutzen. ### Konfiguration der Datenquelle Im Abschnitt Datenquelle verbinden Sie Avonni Map mit Ihren Salesforce-Daten. Sie haben zwei Optionen.
| Datenquellentyp | Beschreibung | Anwendungsfall | | ------------------------ | -------------------------------------------------------------------------------------- | -------------------------------------------------------- | | **Manuelle Datenquelle** | Daten manuell in die Datentabelle eingeben. | Ideal für nicht dynamische Daten, Tests und Demos. | | **Abfrage** | Erstellen Sie eine Abfrage, um die Tabelle automatisch mit Salesforce-Daten zu füllen. | Geeignet für dynamische, Echtzeit- und große Datensätze. | ### Konfiguration der Datenzuordnung Im Abschnitt Datenzuordnungen können Sie Ihre Kartenkomponente aktivieren, indem Sie angeben, wie die Felder zugeordnet werden sollen. Dabei werden Felder, z. B. Standortkoordinaten aus Ihrer Datenquellenkonfiguration, den relevanten Kartenattributen zugeordnet.
Datenmodellfreigabe mit Avonni Map **Einhaltung der Salesforce-Datenfreigaberegeln:** * **Org-Einstellungen beachten:** Avonni-Komponenten entsprechen vollständig den bestehenden Datenfreigabekonfigurationen und Zugriffseinstellungen Ihrer Salesforce-Organisation. * **Keine Beeinträchtigung:** Diese Komponenten verändern oder beeinflussen Ihre zuvor festgelegten Datenfreigaberegeln in keiner Weise. * **Kontrollierte Sichtbarkeit und Zugriff:** Die Möglichkeit, Datensätze über Avonni-Komponenten anzuzeigen und mit ihnen zu interagieren, wird durch die von Ihrer Organisation definierten Freigabeeinstellungen und Benutzerberechtigungen gesteuert
Sie müssen sich auf den Abschnitt Standort konzentrieren, um sicherzustellen, dass Ihre Datenzuordnungen korrekt eingerichtet sind, insbesondere bei der Zuordnung von Standorten. Hier ist der Grund: 1. **Datenzuordnungen konfigurieren**: Um sicherzustellen, dass die Kartenkomponente die richtigen Informationen anzeigt, müssen Sie Salesforce-Datenfelder ihren entsprechenden Standortbezeichnungen zuordnen. Beispielsweise ordnen Sie ein Salesforce-Feld mit Straßenadressen dem Label 'street' in der Kartenkomponente zu, Ortsnamen dem Label 'city' und so weiter. 2. **Bedeutung der Genauigkeit**: Genaue Zuordnungen sind entscheidend. Die Kartenkomponente kann falsche Informationen anzeigen, wenn das falsche Salesforce-Feld einem Standortlabel zugeordnet wird. Wenn beispielsweise das Feld 'city' fälschlicherweise dem Label 'postal code' zugeordnet wird, könnte die Karte einen Standort in einer völlig anderen Stadt oder sogar in einem anderen Land anzeigen.
#### Filter Mit dem Attribut Filter können Sie bestimmte Felder auswählen, um die in der Kartenkomponente angezeigten Marker zu filtern und zu verfeinern.
### Weitere Einstellungen #### Listenansicht Diese Funktion zeigt die Standortliste an oder blendet sie aus. Gültige Werte sind visible, hidden oder auto. Der Standardwert ist auto, wodurch die Liste nur angezeigt wird, wenn mehrere Marker vorhanden sind. #### Zoomstufe In der Kartenkomponente können Sie die Zoomstufe anpassen, um sich auf verschiedene Bereiche zu konzentrieren, von der ganzen Welt bis zu einzelnen Gebäuden. Wenn Sie keine Zoomstufe festlegen, passt sich die Karte automatisch an, um alle darauf platzierten Marker anzuzeigen.
Im Eigenschaften-Panel gibt es die Option, den Zoom manuell festzulegen. Die Zoomstufen reichen auf Desktop-Browsern von 1 bis 22 und auf mobilen Geräten von 1 bis 20. Hier ist eine kurze Übersicht darüber, was jede Zoomstufe im Allgemeinen anzeigt: * Stufe 1: Die ganze Welt * Stufe 5: Ein Kontinent oder eine große Landmasse * Stufe 10: Eine Stadt * Stufe 15: Details auf Straßenebene * Stufe 20: Einzelne Gebäude Weitere Informationen finden Sie in der Google-Maps-API-Dokumentation zu [Zoomstufen](https://developers.google.com/maps/documentation/javascript/overview#zoom-levels) für weiterführende Informationen. #### UI-Verhalten der Kartenkomponente
Mit diesen Einstellungen steuern Sie, wie Benutzer mit der Karte interagieren, und sorgen so für eine übersichtlichere und fokussiertere Benutzererfahrung. Vom Deaktivieren bestimmter Zoom- und Ziehfunktionen bis zum Hinzufügen nützlicher Features wie einer Suchleiste oder einer Fußzeile hat jede Einstellung einen klaren Zweck:
EinstellungBeschreibung
Ziehen deaktivierenVerhindert das Verschieben der Karte per Klicken und Ziehen und hält sie in einer festen Position.
Zoom-Steuerelemente ausblendenEntfernt die Steuerelemente zum Vergrößern/Verkleinern und erhält so eine einheitliche Zoomstufe auf der Karte.
Zoomen per Mausrad deaktivierenVerhindert, dass die Karte mit dem Mausrad vergrößert oder verkleinert wird, und sorgt so für eine stabile Zoomstufe.
Doppelklick-Zoom deaktivierenDeaktiviert das Vergrößern der Karte per Doppelklick und hält so eine feste Zoomstufe aufrecht.
Standard-Benutzeroberfläche deaktivierenEntfernt standardmäßige Kartenelemente wie den Umschalter für die Straßenansicht und sorgt so für eine aufgeräumtere Kartenanzeige.
Footer anzeigenZeigt eine Fußzeile auf der Karte für zusätzliche Informationen wie Kartendatenquellen oder eine Legende an.
DurchsuchbarFügt der Karte eine Suchleiste hinzu, damit Benutzer bestimmte Standorte oder Punkte einfach finden und heranzoomen können.
#### Kartenmittelpunkt Wenn sich mehrere Marker auf der Karte befinden, fokussiert sie automatisch einen zentralen Punkt in der Nähe der Mitte aller Marker. Dieser Punkt wird anhand ihrer Standorte berechnet.
*** ## Interaktionen Für die Kartenkomponente gibt es eine Interaktion „on Select“. Mit dieser Funktion können Sie festlegen, welche Aktion ausgeführt werden soll, wenn Benutzer auf einen Kartenmarker klicken.
InteraktionstypBeschreibung
Toast anzeigenZeigt eine kurze Popup-Benachrichtigung auf dem Bildschirm an und liefert nach dem Klicken auf eine Kartenmarkierung schnell Feedback oder Informationen.
NavigierenLeitet den Benutzer zu einer anderen Seite in Ihrer Site oder URL weiter und führt ihn zu detaillierteren Informationen über den angeklickten Ort.
Warn-Modal öffnenÖffnet ein modales Fenster mit einer Alarmmeldung und präsentiert wichtige Informationen oder Warnungen zum ausgewählten Ort.
Bestätigungsdialog öffnenLöst ein Bestätigungsdialogfeld aus, das für Aktionen verwendet wird, die zusätzliche Benutzerbestätigung erfordern, wie etwa die Teilnahme an einer Veranstaltung.
Flow-Dialog öffnenÖffnet einen Dialog, der einen Salesforce Flow ausführt, und startet Workflows oder Prozesse im Zusammenhang mit dem angeklickten Ort.
*** ## Einstellungen {% tabs %} {% tab title="🎛️ Eigenschaften" %} | Name | Beschreibung | | -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Listentitel** | Legen Sie einen Titel für Ihre Kartenliste fest. | | **Listenansicht** |

Diese Funktion ist besonders nützlich, damit Benutzer eine detaillierte Liste der Orte oder Elemente auf der Karte sehen können.

| | **Zoomstufe** |

Die Zoomstufen reichen auf Desktop-Browsern von 1 bis 22 und auf mobilen Geräten von 1 bis 20.

Hier ist eine kurze Übersicht darüber, was jede Zoomstufe im Allgemeinen anzeigt:

| | **Ziehen deaktivieren** | Verhindert, dass Benutzer die Kartenansicht ziehen. | | **Zoom-Steuerelemente ausblenden** | Entfernt die Zoom-Steuerelemente zum Vergrößern/Verkleinern von der Karte | | **Zoomen per Mausrad deaktivieren** | Deaktiviert das Zoomen mit dem Mausrad | | **Doppelklick deaktivieren** | Verhindert, dass ein Doppelklick die Karte vergrößert | | **Standard-Benutzeroberfläche deaktivieren** | Entfernt die Standardoberfläche von Google Maps für ein aufgeräumteres Erscheinungsbild | | **Footer anzeigen** | Fügt der Kartenkomponente einen Fußzeilenbereich hinzu | | **Durchsuchbar** | Aktiviert eine Suchfunktion innerhalb der Karte | | **Datenquelle** | | | **Kartenmittelpunkt** | Geben Sie den anfänglichen zentralen Punkt der Karte an | | **Filteroptionen** | Richten Sie Filter für die Karte ein, die als Popover angezeigt werden | | **Suchmaschinenoptionen** | | | **Größe** |

"Overflow" bezeichnet, wie Inhalte, die die Grenzen ihres Containers überschreiten, behandelt oder angezeigt werden. Wenn der Inhalt innerhalb einer Layoutkomponente zu groß ist, um in die zugewiesenen Abmessungen (Höhe und Breite) zu passen, bestimmt die Overflow-Einstellung, was mit dem überschüssigen Inhalt geschieht.

| | {% endtab %} | | {% tab title="🎨 Gestaltung" %} {% endtab %} {% endtabs %} *** ## Anwendungsbeispiele ### Beispiel 1: Reaktive Account-Karte {% @arcade/embed url="" flowId="Dxon9206UTTMphdamjrL" %} Bringen Sie Ihre Account-Daten mit einer interaktiven Karte zum Leben, die sofort auf Benutzerauswahlen reagiert. Indem Sie die Kartenkomponente mit Ihrer Accounts Data Table verbinden, können Sie präzise Rechnungsstandorte anzeigen, sobald ein Vertriebsmitarbeiter auf einen Account-Datensatz klickt. *** #### **Was Sie erreichen werden** * **Kontextabhängige Zuordnung:** Die Karte wird automatisch aktualisiert und zeigt den Rechnungsstandort des ausgewählten Accounts basierend auf der Auswahl des Vertriebsmitarbeiters in der Datentabelle an * **Optimierte Account-Navigation:** Vertriebsmitarbeiter können Accounts visuell lokalisieren, ohne die Seite zu verlassen *** #### **Bevor Sie beginnen** * **Komponente Accounts Data Table:** Stellen Sie sicher, dass bereits eine Accounts Data Table-Komponente mit dem API-Namen auf der Seite platziert ist `AccountsTable` *** #### **So richten Sie es ein** {% stepper %} {% step %} #### **Die Kartenkomponente hinzufügen** * Ziehen Sie die AX–Map-Komponente auf die Experience-Builder-Arbeitsfläche {% endstep %} {% step %} #### **Konfigurieren Sie die Komponente** * Setzen Sie den API-Namen auf `MapAccount` * Setzen Sie den Typ auf `Leaflet` {% endstep %} {% step %} #### **Legen Sie eine Datenquelle fest** * Erstellen Sie eine Abfrage für das Account-Objekt * Wenden Sie den folgenden Filter an: Id = `{{AccountsTable.selectedRecord.Id}}` {% endstep %} {% step %} #### **Datenzuordnungen festlegen** * Setzen Sie den Titel auf `Account-Name` * Setzen Sie unter Standort den Breitengrad auf `Breitengrad der Rechnungsadresse` und den Längengrad auf `Längengrad der Rechnungsadresse` {% endstep %} {% step %} #### **Sehen Sie sich Ihre Arbeit in der Vorschau an** * Starten Sie die Vorschau, wählen Sie einen Datensatz in der Accounts Data Table aus und bestätigen Sie, dass die Karte aktualisiert wird und den entsprechenden Rechnungsstandort anzeigt {% endstep %} {% endstepper %} ### Beispiel 2: Nachverfolgung von Kundenbestellungen {% @arcade/embed url="" flowId="tiVuRRBHNCbcUb5qoGQL" %} Geben Sie Ihren Kunden Echtzeit-Einblick, wo sich ihre Bestellungen befinden. Durch die direkte Zuordnung von Geodaten aus dem Order-Objekt können Sie eine transparente, intuitive Nachverfolgung aufbauen, die Kunden in jeder Phase auf dem Laufenden hält. *** #### **Was Sie erreichen werden** * **Live-Bestellübersicht:** Kunden können den aktuellen Standort ihrer Bestellung auf einer interaktiven Karte sehen * **Vertrauen durch Transparenz:** Eine klare visuelle Nachverfolgung reduziert Supportanfragen und verbessert die Kundenzufriedenheit *** #### **Bevor Sie beginnen** * **Benutzerdefiniertes Geolocation-Feld:** Stellen Sie sicher, dass im Order-Objekt ein benutzerdefiniertes Geolocation-Feld erstellt wurde, um Koordinaten für die Echtzeitverfolgung zu speichern *** #### **So richten Sie es ein** {% stepper %} {% step %} #### **Die Kartenkomponente hinzufügen** * Ziehen Sie die AX–Map-Komponente auf die Experience-Builder-Arbeitsfläche {% endstep %} {% step %} #### **Konfigurieren Sie die Komponente** * Setzen Sie den API-Namen auf `TrackingMap` * Setzen Sie den Typ auf `Leaflet-Karte` {% endstep %} {% step %} #### **Legen Sie eine Datenquelle fest** * Erstellen Sie eine Abfrage für das Order-Objekt {% endstep %} {% step %} #### **Datenzuordnungen festlegen** * Setzen Sie den Titel auf `Bestellnummer` * Setzen Sie den Typ auf `Pin` * Setzen Sie unter Standort den Breitengrad auf `Tracking-Geostandort (Breitengrad)` und den Längengrad auf `Tracking-Geostandort (Längengrad)` {% endstep %} {% step %} #### **Sehen Sie sich Ihre Arbeit in der Vorschau an** * Starten Sie die Vorschau und überprüfen Sie, ob jede Bestellung als Pin auf der Karte an ihrem korrekten verfolgten Standort angezeigt wird {% 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: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-map.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.