In this blog post, you will learn how to integrate Google
place autocomplete and details API with the salesforce lightning.
Basically,
we have a single lightning component added to the page layout as shown below
Whenever the user clicks on the address field, we are showing modal popup where he can start typing the address to get recommendations.
As soon as the user starts entering an address, we invoke google place auto-complete API to give best recommendations based on the input. As we get the response we are dynamically showing the list on the user interface.
When the user selects any address in the list, we are making the second call to google place detail API to get a city, state, country, and other details related to the selected place or address and stamping it on the base input fields. when the user clicks on the Save button, details will be stored in the database.
You may also like
7 Comments
Hi Naveen,
ReplyDeleteAwesome work, thanks for sharing it.
I have a question about the Google Api Key, which kind of API should we use ?
Thanks!
API key is generated when we register for the address API within google. You need to use that key to hit the API.
ReplyDeleteNice. What if I would like to autocomplete in the standard Address field. How can this achieved?
ReplyDeleteI think we do not have an option to implement the autocomplete functionality for standard address field as it will be in the standard page layout and we have limited control to customize it.
DeleteHi Naveen, Nice work thanks for sharing this...
ReplyDeleteone QQ : does the google API is Free? or do we need to buy to use it for organizations?
Thanks for the feedback. There is a trial period of one year where you can subscribe for the API free service. For organisational use, yes you have to pay.
DeleteI have created the custom AdressDetail Object and activated the GoogleAPI key with free trial. Enabled below API,
ReplyDeleteDirectionsAPI
GeolocationAPI
GeoCodingAPI
PlaceAPI
MapsJavascript API
But its not working.
Its not giving any recommendations. Thought the debug statement 'API invoked successfully' printing. Its not giving recommendations and hence not able to select the Adress from recommendations.