Search Accounts using LWC – Map View

We have been looking out for some simple and amazing solutions that can make one’s life easier. And in our world, it is mostly Sales representative driven since they go out and grab business.

One simple solution that can help a Sales Rep (or any such user) is to be at a location and look for clients around him/her to close off deals on the same day.

A person can simply log into the Org, enter a ZipCode, and access the clients near him. The solution can certainly be tweaked with a little more filters and details.

Like you can see above, by entering a zip code, the accounts matching is visible in a map with markers.

---

Apex Class:

public inherited sharing class SearchAccountsLWCController {
    
    @AuraEnabled (Cacheable = true)
    public static List getAccountsByZipCode(String zipCode, Integer soqlLimit){
        try {
            zipCode = '%' + zipCode + '%';
            List accountList = [SELECT Id, Name, Phone, Industry, BillingPostalCode, BillingCity, 
                                         BillingState, BillingStreet, BillingCountry 
                                         FROM Account 
                                         WHERE BillingPostalCode LIKE :zipCode 
                                         LIMIT :soqlLimit];

            if (accountList.isEmpty()) {
                throw new AuraHandledException('No Accounts in this area '+zipCode);
            }

            return accountList;
            
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }
}

Lightning Web Component:

<template>
    <lightning-card title="Account Search Map" icon-name="standard:account">
        <div if:true={errorMsg} style="margin-left: 3%;">
            <p style="color: red;">{errorMsg}</p>
        </div>

        <lightning-layout multiple-rows="true" vertical-align="end">
            <lightning-layout-item size="12" small-device-size="10" medium-device-size="8" large-device-size="6" padding="around-small">
                    <div class="slds-form-element">
                            <div class="slds-form-element__control">
                                    <lightning-input type="text" 
                                                     label="Enter Zip Code" 
                                                     onchange={handleZipCodeSearch} ></lightning-input>
                            </div>
                        </div> 
            </lightning-layout-item>
            <lightning-layout-item size="12" small-device-size="2" medium-device-size="2" large-device-size="2" padding="around-small">
                    <lightning-button label="Search" 
                                      variant="brand" 
                                      onclick={handleAccountSearch}></lightning-button>
                </lightning-layout-item>
            </lightning-layout><br/>

        <div if:true={searchData}>
            <lightning-map
                map-markers={mapMarkers}
                markers-title={markersTitle} >
            </lightning-map>
        </div>
    </lightning-card>
</template>

import { LightningElement, track, wire, api } from 'lwc';
import searchAccounts from '@salesforce/apex/SearchAccountsLWCController.getAccountsByZipCode';

export default class SearchAccountsMapLWC extends LightningElement {
    @track searchData;
    @track errorMsg = '';
    @track zipCodeSearch = '';
    @track limit = 5;
    @track mapMarkers = [];

    handleZipCodeSearch(event) {
        this.zipCodeSearch = event.detail.value;
    }

    handleAccountSearch() {
        this.mapMarkers= [];
        if(!this.zipCodeSearch) {
            this.errorMsg = 'Please enter zipcode to search accounts).';
            this.searchData = undefined;
            return;
        }

        let params = {};
        params.zipCode = this.zipCodeSearch;
        params.soqlLimit = this.limit;

        searchAccounts(params)
        .then(result => {
            console.log('@@@@ result '+result);
            result.forEach((accRecord) => {var marker = {
                value: accRecord.Id,
                location: {
                    Street: accRecord.BillingStreet,
                    City: accRecord.BillingCity,
                    Country: accRecord.BillingCountry,
                },
    
                icon: 'custom:custom26',
                title: accRecord.Name,
            }; 
            console.log('@@@@ marker '+marker);
            this.mapMarkers.push(marker);
            console.log('@@@@ mapMarkers '+this.mapMarkers);});
            this.searchData = result;
            this.error = undefined;
        })
        .catch(error => {
            this.searchData = undefined;
            window.console.log('error =====> '+JSON.stringify(error));
            if(error) {
                window.console.log('@@@@ ERROR '+ error);
            }
        })
    }
    @track markersTitle = "Accounts Found";
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>