How to open google map in new tab(Browser) when Clicking on Text?

Hi Everyone,

My Requirement is to open google map in new tab(Browser) when Clicking on Text? From Address Current Location, Destination is My Required Location. But Text is surround ovel shape blue color circle The format of text like below image

The Text style changes when mouse over on it like below image.

Then when click on text then open new and having google map with To and destination address are set

Hi @NagarjunaS16644648

You can follow the below Approach:

A)Create a new section or edit an existing section in Pega Designer Studio.
Add a text control to the section and enter the text you want to use as the link to Google Maps, such as “View on Google Maps”.
Select the text control and click on the “Actions” tab in the right-hand panel.
Click on the “Add action” button and choose “Open URL” from the list of available actions.
In the “URL” field, enter the URL for Google Maps, including the address or location you want to display on the map. For example: Google Maps
In the “Target” field, choose “_blank” to open the URL in a new browser tab.
Save the section and test the link by previewing or running the case in Pega.

B)To achieve text style changes when the mouse hovers over it in Pega, you can use Cascading Style Sheets (CSS) to define the styles for the normal state and the hover state of the text. Here’s how you can do it:

Create a new CSS file or edit an existing one in Pega Designer Studio.
Define the styles for the normal state of the text using a class selector. For example:

.my-text {
color: blue;
font-weight: bold;
}
Define the styles for the hover state of the text using the same class selector followed by a “:hover” pseudo-class selector. For example:

.my-text:hover {
color: red;
font-style: italic;
}
Apply the class selector to the text control in your section by adding it to the “Styles and classes” field in the control’s properties panel. For example:
my-text
Save the CSS file and preview or run your Pega case to see the text style changes when you hover over it.

Regards,

Bhargav

@BHARGAVPRAKASHG Its Working. But how to create oval shape bule color