Ad Code

Salesforce and google api integration for address autocomplete


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.




Complete code is shared in the Github link here.

Subscribe to our Community and stay connected with us for more content on Salesforce! 


You may also like





Post a Comment

7 Comments

  1. Hi Naveen,
    Awesome work, thanks for sharing it.

    I have a question about the Google Api Key, which kind of API should we use ?

    Thanks!

    ReplyDelete
  2. API key is generated when we register for the address API within google. You need to use that key to hit the API.

    ReplyDelete
  3. Nice. What if I would like to autocomplete in the standard Address field. How can this achieved?

    ReplyDelete
    Replies
    1. I 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.

      Delete
  4. Hi Naveen, Nice work thanks for sharing this...
    one QQ : does the google API is Free? or do we need to buy to use it for organizations?

    ReplyDelete
    Replies
    1. 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.

      Delete
  5. I have created the custom AdressDetail Object and activated the GoogleAPI key with free trial. Enabled below API,
    DirectionsAPI
    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.

    ReplyDelete