Sunday, December 6, 2020

Address Lookup in Lightning Web Components(LWC) using Google Maps Places API

To Enable the address lookup in lightning-input-address first we need to enable the permission for Maps and Location Settings in our salesforce org.

Note: 

Maps and Location Settings feature only available in Professional, Enterprise, Performance, and Unlimited editions.

Path:

From Setup, enter Maps in the Quick Find box, and then select Maps and Location Settings


Once the permission is enabled, we need to provide the show-address-lookup attribute to display the Address Lookup field.

Example:

<template>
   <lightning-card title="Address Lookup using Google Maps Places API">
      <lightning-input-address  address-label="Shipping 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 Shipping Address"
         show-address-lookup>
      </lightning-input-address>
   </lightning-card>
</template>

Output:




No comments:

Post a Comment