Address Lookup in Lightning (LWC, Aura) using Google API

In this post, we will implement the Address Lookup in Lightning (LWC, Aura) using Google Maps Places API in Lightning using Aura and Lightning Web Components. This is used to Autocomplete address in Lightning. When we start typing an address in the lookup field, a dropdown menu displays matching addresses returned by the Google Maps Places API. We can select the address from the dropdown which will auto-populate address fields based on the selected address. Let’s hop into the implementation.

Implementation

Salesforce Lightning framework provides lightning:inputAddress and lightning-input-address for Aura and Lightning Web Components respectively. Both tags support Address Lookup in Lightning using Google Maps Places API. By default, it displays all the address fields in Text format.

First, we need to enable Maps and Location Settings in our Salesforce Org. To enable it, follow the below steps:

  1. Type Maps in Quick Find box and select Maps and Location Settings.
  2. Click Edit.
  3. Check Enable Maps and Location Services and hit Save.

Remember that Maps and Location Settings is only available in Professional, Enterprise, Performance, and Unlimited editions. It is not available in Developer Edition.

lightning:inputAddress and lightning-input-address

Both these tags support Address Lookup in Lightning using Google Maps Places API with exact same functionality. For this demonstration, we will use the Lightning Web Component tag lightning-input-address. We have to provide few attributes like street-label, city-label, country-label, etc to display the label for Address fields and street, city, country, etc attributes to get the values for Address Fields. We can also provide default values to these Address Fields.

Create a Lightning Web Component and provide values for label attributes and address field attributes. In the below component, we are providing the default value for the street. In addition to these attributes, we need to provide show-address-lookup attribute to display the Address Lookup field.

app.html

<template>
    <lightning-card title="Address Lookup using Google Maps Places API">
        <div class="slds-p-around_medium">
            <lightning-input-address
                address-label="Billing Address"
                street-label="Street"
                city-label="City"
                country-label="Country"
                province-label="Province"
                postal-code-label="PostalCode"
                street="Default Street Line"
                city=""
                country=""
                province=""
                postal-code=""
                required
                field-level-help="Select Billing Address" 
                show-address-lookup>
            </lightning-input-address>
        </div>
    </lightning-card>
</template>
    

Address Lookup using Google Maps Places API

This is how our implementation will look:

Address Lookup in Lightning (LWC, Aura) using Google API
Address Lookup in Lightning (LWC, Aura) using Google API

Dropdown Fields for Country and Province

If you want to use lightning-input-address but you want to provide dropdowns for Country and Province, we need to provide country-options and province-options attributes and provide a JSON array with label and value as the value for these attributes.

First, create a component and add all required attributes applied in the above example. We can ignore the show-address-lookup attribute for this demonstration though it will work with dropdown fields as well. Add country-options and province-options attributes to provide the list of Countries and respective Province. We will handle this in JS Controller. Add onchange handler as well to update the list of Province once the Country is changed.

app.html

<template>
    <lightning-card title="Dropdown Fields for Country and Province">
        <div class="slds-p-around_medium">
            <lightning-input-address
                address-label="Billing Address"
                street-label="Street"
                city-label="City"
                country-label="Country"
                province-label="State"
                postal-code-label="PostalCode"
                street={billingAddress.street}
                city={billingAddress.city}
                country={billingAddress.country}
                province={billingAddress.state}
                postal-code={billingAddress.postalCode}
                field-level-help="Select Billing Address" 
                country-options={countryOptions}
                province-options={stateOptions}
                onchange={handleAddressChange} >
            </lightning-input-address>
        </div>
    </lightning-card>
</template>
    

In JS Controller, first, create JSON billingAddress to assign the default address. Create countryStateeMap JSON to store the list of Province with respect to a particular Country. Create getters stateOptions() and countryOptions() to pass Province and Countries to UI. Check this post to know How Getters works in Lightning Web Components. The onchange handler handleAddressChange will get the updated Country value and update the list of Province.

app.js

import { LightningElement } from 'lwc';

export default class App extends LightningElement {
    billingAddress = {
        street: 'Mannat, Bandstand, Bandra (West)',
        city: 'Mumbai',
        state: 'MH',
        postalCode: '400050',
        country: 'IN',
    };

    selectedCountry = 'IN';

    countryStateeMap = {
        IN: [
            { label: 'Maharashtra', value: 'MH' },
            { label: 'Telangana', value: 'TN' },
            { label: 'Uttar Pradesh', value: 'UP' },
            { label: 'Kerla', value: 'KL' }
        ],

        US: [
            { label: 'California', value: 'CA' },
            { label: 'Texas', value: 'TX' },
            { label: 'Washington', value: 'WA' },
        ]
    };

    countryOptions = [
        { label: 'India', value: 'IN' },
        { label: 'United States', value: 'US' }
    ];

    get stateOptions() {
        return this.countryStateeMap[this.selectedCountry];
    }
    get countryOptions() {
        return this.countryOptions;
    }

    handleAddressChange(event) {
        this.selectedCountry = event.detail.country;
    }
}

Dropdown Fields for Country and Province

Autocomplete Address in Lightning
Dropdown Fields for Country and Province

As Maps and Location Settings is not supported in Developer Edition, you can test this functionality in the Playground provided by Salesforce.

This is how we can implement Address Lookup in Lightning (LWC, Aura) using Google Maps Places API to Autocomplete (Autofill) Address in Lightning and how to use Dropdowns for Country and Province in Lightning Web Components. The same implementation should work for Aura Components as well. You just need to convert it into Aura Component. Check this official Salesforce documentation to know more about lightning:inputAddress to implement it in Aura Component.

If you want to check more implementations using Lightning Web Components, you can check it here. Please Subscribe if you don’t want to miss new implementations. See you in the next post.

3 thoughts on “Address Lookup in Lightning (LWC, Aura) using Google API”

  1. Hi there,
    thanks for putting this out ,this is great.
    i was trying this solution ,for first one ,i am not getting search text field,
    how to implement the first solution

Leave a Reply

Your email address will not be published. Required fields are marked *