Harness and Section forms Adding an Address Map control

You can add the pxAddressMap control to a cell, enabling users to interact with Google Maps from within an application. This control is responsive when added to a dynamic layout, and you can configure events on the control, such as displaying location details.

See PDN article How to use the Address Map control for usage information.

Obtaining a Google API key

The Address Map control only displays at runtime if you have first obtained a Google API key.

1. Access the Google Developer Console at https://console.developers.google.com and log in to your account.
2. Select your project. If no project currently exists, click Create Project to create a new project.
3. From the sidebar, select APIs & auth > APIs.
4. Locate "Google Maps JavaScript API v3" in the list and click the button to turn this ON.
5. From the sidebar, select APIs & auth > Credentials.
6. Under the Public API access section, click Create new Key.
7. A window displays. Click Browser key.

8. On the next screen that displays, locate the Accept Requests from these HTTP Referers (Web Sites) field.

   • If you do not want to restrict Referrer based access to the generated key, leave this field blank.

   • If you do want to configure a Referrer, see the Google Developer documentation for more details about the syntax.
     Note that you can still come back at a later time to edit the Referrers for this key.

9. Click Create to close this window and generate the API key.
10. Copy the API key listed under Key for browser applications and paste it in the PRPC Dynamic System Setting at: uiengine/map/googleapikey.

Note: The above steps apply to a non-Pegasystems resource and may have changed since the publication of this article. Refer to the official Google Developer documentation for Obtaining an API Key for up-to-date assistance with this process.

Adding an Address Map control

1. In Designer Studio, select the Advanced menu and drag the Address Map control to the harness, section, or flow action.
2. Click the gear icon for the control to display the Cell Properties panel.
3. Configure the control in the fields provided on the General tab, then click OK to save your changes.
   

About Flow Actions

About Harnesses

About Sections