Karten einbetten

Überblick

You can embed maps from multiple providers in your app to provide users with an easy way to reach your location. You can also configure a Navigate button to offer users directions on how to get from their location to a destination of your choice. For the purpose of this example, we will use Google Maps to embed maps into UiPath^® Apps.

Tipp:

Weitere Informationen zur Verwendung der Google Maps -Such-APIs finden Sie in der offiziellen Dokumentation.

Karte einbetten

1. Suchen Sie in Google Maps die Adresse, die Sie freigeben möchten.

2. Klicken Sie auf Freigeben und wechseln Sie zur Registerkarte Karte einbetten.

   

3. Select the desired size and copy the link by selecting COPY HTML.

4. Wechseln Sie in ^UiPath® Apps zur gewünschten App.

5. Fügen Sie ein IFrame -Steuerelement hinzu.

6. Fügen Sie den in Schritt 3 kopierten Link im Feld Quelle des Steuerelements hinzu. Entfernen Sie die <iframe> -Tags und fügen Sie Anführungszeichen hinzu. Ein Link sollte beispielsweise folgendermaßen aussehen:

"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1511.2061413255587!2d-73.9796223417571!3d40.75295602669006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2590199a4c12d%3A0x35c4d69dd805cc5e!2sOne%20Vanderbilt!5e0!3m2!1sen!2sro!4v1674472555170!5m2!1sen!2sro"

Hinweis: Um Apps dynamisch einzubetten, empfehlen wir die Verwendung der Google Maps API zum Einbetten von Karten. Weitere Informationen finden Sie in der offiziellen Dokumentation.

Schaltfläche „Navigieren hinzufügen“

1. Wechseln Sie in ^UiPath® Apps zur gewünschten App.

2. Fügen Sie ein Button -Steuerelement hinzu.

3. Benennen Sie die Schaltfläche in Navigierenum. Sie können der Schaltfläche auch ein entsprechendes Symbol hinzufügen, z. B. ein Auto.

4. Wechseln Sie zur Registerkarte Ereignisse und bearbeiten Sie die Regel „ Geklickt auf “ für die Schaltfläche.

5. Fügen Sie eine Regel URL öffnen hinzu.

6. Fügen Sie die Directions API aus Google Maps im folgenden Format hinzu:

   „https://www.google.com/maps/dir/?api=1&destination=UiPath+New+York+USA“.

Ergebnis

When previewing the app, the embedded interactive map and button are displayed. If you click Navigate, a new Google Maps page is opened. You can select your desired means of transportation and add your starting point, for instructions on how to get to the configured destination.