Incorporar mapas

Visão geral

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.

Dica:

Para obter mais informações sobre como usar as APIs de pesquisa do Google Maps , consulte a documentação oficial.

Incorporar mapa

1. No Google Maps, pesquise o endereço que você deseja compartilhar.

2. Clique em Compartilhar e acesse a guia Incorporar um mapa .

   

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

4. Vá para seu aplicativo desejado em UiPath^® Apps.

5. Adicione um controle IFrame .

6. Adicione o link copiado na Etapa 3 no campo Origem do controle. Remova as tags <iframe> e adicione aspas. Por exemplo, um link deve ter a seguinte aparência:

"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"

Observação: para incorporar aplicativos dinamicamente, recomendamos usar a API do Google Maps para incorporar mapas. Para mais informações, consulte a documentação oficial.

Adicionar botão Navegar

1. Vá para seu aplicativo desejado em UiPath^® Apps.

2. Adicione um controle Button .

3. Renomeie o botão para Navegar. Você também pode adicionar um ícone apropriado ao botão, como um carro.

4. Vá para a guia Eventos e edite a regra Clicado para o botão.

5. Adicione uma regra Abrir URL.

6. Adicione a API Directions do Google Maps usando o seguinte formato:

   "https://www.google.com/maps/dir/?api=1&destination=UiPath+New+York+EUA".

Resultado

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.