Consider a use case wherein we need to show the user address into google map. Pega provides a special control to map address in Google Map. This special control is called - Address Map control . In this post we will talk about how to use this control and how to show an address in google map.
Address Map control uses Google Maps Java Script API from Google Cloud Platform the show the address into Google Map. Hence you need to perform following things in google cloud platform to ensure the feature works properly.
Enable Maps JavaScript API. Post login to Google Cloud Platform, search for - Maps JavaScript API and enable it. After you enable it the API will will look like below.
Create API Key - Post login to Google Cloud Platform. Click on Google Cloud Navigation Menu. Click on API and Services -> Credentials . Give the details to create credential and create API Key. Remember to create API key you need to enable billing in Google Cloud Platform.
To know how to setup Google Cloud Platform you can visit this blog - https://www.techpapers.online/post/google-cloud-platform-setup
Login to Pega environment using credential which has either App Studio or Dev Studio access.
Go to App Studio and create a new Case type. Just assume we are building a Loan Application where we need to capture Customer information like Name, Address to submit loan request to bank.
In this case add user input fields like First Name, Last Name and Address. For address field we will use Location control. Choose Location as type for address field.
After adding all fields, the case will look like below.
Set the Google API Key in PEGA to use Google Map API in Pega Address Map Control. We do this by setting a DSS - Pega-EndUserUI • uiengine/map/googleapikey
Switch to Designer studio to configure Address Map control we set for Address field. Pega offers Address Map control as a section which has a text field and Google Map control into it. So when you open your flow where this control is configure, you will see the Input field is sourced by a section. But don't worry of this at this time and lets take what Pega OOTB gives us.
Open the properties of Address field and open the section configured there. Notice the highlighted part of below screen shot.
Open the properties of Map control and set below options.
Check Show User Location Check box - this is to show the location of user who is seeing this control now. The location will be shown as Blue Dot in the map.
Marker Source - In this section we configure what to show in Google Map as Red Pin. We can configure to just show the address which user enters into Location Input field or we can configure a list using Data Page which has a set of locations. All locations will be shown in the Google Map. By default a property -pyAddres and its value is configured to show in Google Map. Just notice above screen pyAddress is the property associated with Location Field. You can right click the field and check this property.
Save all configuration changes and run the case. If all goes fine then after you launch the case you will see a Map showing your current location.
After enter a address in input field , you see Google Map shows the same after you press enter key.
I hope this blog will help Pega Developers who want to show customer address in Google Map. This post does not cover the full documentation around Pega Address Map Control, rather it helps to build an app quickly so that you can enhance it further based on your need.
If you have come to this section of the blog, then we are sure that you find this content useful. Please share your valuable feedback in comment section and share this content with your friends and other developers. If you have any questions regarding this topic or any other topic, do let us know we will try produce content on that topic as well.
Comments