Account Map LWC

To handle this request, we're going to create a Lightning Web Component that plots Account data on a lightning-map component. The component will invoke an Apex method via the wire service.

Here are the high-level steps:

1. Create Roll-Up Summary Field
2. Enable "Geocodes for Account Billing Address" Data Integration Rule
3. Create Apex Class
4. Create Lightning Web Component

‍

Create Roll-Up Summary Field

Let's add a Custom Field on the Account object that displays Won Opportunity Amount.

• Navigate to Setup > Object Manager > Account > Fields & Relationships and click "New"
• Field Type: Roll-Up Summary
• Field Label: Won Opportunity Amount
• Summarized Object: Opportunities
• Roll-Up Type: Sum
• Field to Aggregate: Amount
• Filter Criteria: Won Equals True

‍

Enable "Geocodes for Account Billing Address" Data Integration Rule

This feature will cause Latitude and Longitude values to populate on Accounts based on Billing Addresses. The lightning-map component can only contain a maximum of 10 geocoded address lookups (which means that we'll need to provide Latitude and Longitude coordinates if we exceed that count).

• Navigate to Setup > Data Integration Rules and choose "Geocodes for Account Billing Address"
• Click "Activate"

‍

Create Apex Class

We'll create an Apex Class to query the server-side Account data.

• Navigate to Setup > Apex Classes and click "New"
• Copy and paste the following code:

_{AccountMapController}

‍

Create Lightning Web Component

Lastly, we will add a Lightning Web Component to plot the Account-related data on a lightning-map component.

• Navigate to VS Code
• Open the Command Palette (Ctrl+Shift+P) and choose "SFDX: Create Lightning Web Component"
• Copy and paste the following code:

_{accountMap.html}

‍

_{accountMap.js}

‍

_{accountMap.js-meta.xml}