Add a Static Google Map to a Form

Pictures can be worth a thousand words. Maps can clearly show a lot of information in a small amount of space, such as the location of your business and its surroundings.

Note:

The StaticMap sample form uses Google's Maps Static API to add the map to a form. To use the Google API, you must authenticate requests using an API key. The API key is used to track API requests associated with your project for quota, usage, and billing. To get your API key and enable billing, visit the Google Maps Platform website at https://developers.google.com/maps/documentation/maps-static/get-api-key.

Topics:

• Learn About the StaticMap Sample

• Import the StaticMap Sample

• Map It Yourself

Learn About the StaticMap Sample

The StaticMap sample demonstrates how you can display a map on your form.

First, you add an Input Text control and an Image control to your form. Then, you configure the Image control to compute the value in the Input Text field and display the map based on the location coordinates entered.

Description of the illustration forms-map.png

Import the StaticMap Sample

To import the StaticMap sample:

1. In the Integration Cloud navigation pane, click Processes.
2. In the Processes navigation pane, click Applications.
3. On the Process Applications page, click Create, click Import, and then click Application.
4. Browse and locate the StaticMap.exp file you downloaded and click Import.
5. Open the StaticMap application.
6. In the Application navigation pane, click Forms, and then open the StaticMap form.

Before you can enter values and view any maps, you must update the computed value with your Google API key.

Map It Yourself

To add a map to your form:

1. Navigate to the Forms page.
   1. In the Integration Cloud navigation pane, click Processes.
   2. In the Processes navigation pane, click Applications.
   3. On the Process Applications page, click Forms.
2. Create a form called StaticMap.
3. Drag and drop an Input Text control and an Image control onto your form.
4. Select the Image control.
5. On the General tab in the Properties pane, select the Computed Value check box.
6. Click Edit to open the Configure Computed Value dialog.
   1. In the Type field, select Function.
   2. In the Function field, select Concat. Leave the value of Constant for the second Type field.
   3. In the Value field, enter the URL to the Google Map API:

      https://maps.googleapis.com/maps/api/staticmap?size=640x400&key=YOUR_API_KEY&markers=

      where:

      YOUR_API_KEY is the API key that you got from Google.

   4. Click Add .
   5. In the third Type field, select Control.
   6. In the Control Name field, select the name of the input text control that you added.
   7. Click OK.

   
   Description of the illustration forms-map-computed-value.png

7. Click Preview to test the results. Enter the coordinates for different locations and confirm that the map updates automatically.

It’s possible to use a map with a global connector instead of a form control if your data comes from an external service. Also, many configurations are possible for static maps. See the Google documentation for using maps.