How to search Address from Google using LWC in Salesforce and save it to the record?

How to search Address from Google using LWC in Salesforce and save it to the record?

HTML:

<template>
    <div class="slds-box slds-theme--default">
        <lightning-record-edit-form record-id={recordId} object-api-name={objectAPIName} onsuccess={handleSuccess} onsubmit={handleSubmit}>
            <lightning-messages>
            </lightning-messages>
            <lightning-input-address
                address-label="Address"
                street-label="Street"
                city-label="City"
                country-label="Country"
                province-label="State/ Province"
                postal-code-label="Zip/ Postal Code"
                onchange={addressInputChange}
                show-address-lookup>
            </lightning-input-address>
            <lightning-button class="slds-m-top_small" type="submit" label="Update Address">
            </lightning-button>
        </lightning-record-edit-form>
    </div>
</template>

JavaScript:

import { LightningElement,api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class AddressLwc extends LightningElement {
    
    @api recordId;
    @api objectAPIName;
    strStreet;
    strCity;
    strState;
    strCountry;
    strPostalCode;

    handleSuccess( event ) {

        console.log( 'Updated Record Id is ', event.detail.id );
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Successful Record Update',
                message: 'Record Updated Surccessfully!!!',
                variant: 'success'
            })
        );

    }

    handleSubmit( event ) {
        
        let fields = event.detail.fields;
        console.log( 'Fields are ' +  JSON.stringify( fields ) );
        event.preventDefault(); 

        if ( this.objectAPIName === 'Account' ) {

            fields.BillingStreet = this.strStreet;
            fields.BillingCity = this.strCity;
            fields.BillingState = this.strState;
            fields.BillingCountry = this.strCountry;
            fields.BillingPostalCode = this.strPostalCode;

        } else if ( this.objectAPIName === 'Contact' ) {

            fields.MailingStreet = this.strStreet;
            fields.MailingCity = this.strCity;
            fields.MailingState = this.strState;
            fields.MailingCountry = this.strCountry;
            fields.MailingPostalCode = this.strPostalCode;

        }

        this.template.querySelector( 'lightning-record-edit-form' ).submit( fields );

    }

    addressInputChange( event ) {

        this.strStreet = event.target.street;
        this.strCity =  event.target.city;
        this.strState = event.target.province;
        this.strCountry = event.target.country;
        this.strPostalCode = event.target.postalCode;

    }

}

js-meta.xml:

<?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__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <property name="objectAPIName" type="String" label="Object API Name"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Output:

Leave a Reply