How to add Google Address Autocomplete to a Textbox Control
Description
Adding address autocomplete to a textbox control can make it easier to lookup and enter addresses in applications.
Discussion
In many applications (both web and mobile) it is common when typing in an address to get autocomplete suggestions, as shown in the image below. In the image shown, the user has begun typing an address into the Address control ('1234') and a drop-down list of possible addresses is shown.
This is achieved using a feature of the Google Maps API, which can be added to any textbox in a UX component.
Selecting one of the options in the suggestion list will autocomplete the address for you. In addition, mappings between address parts and controls on the UX Component can be defined. After an address is selected, mapped controls will be updated with the corresponding address part. This is useful in applications where you may want to capture individual parts of an address in separate fields.
Google Address Autocomplete can be added to a textbox control in a UX Component.
Select the textbox control that will be used to search for an address. Change the (Special type property to GoogleAddressSuggest.
If desired, define the controls in the UX Component to populate after an address is selected. Each part of an address can be mapped to a control in the UX Component.
You can also optionally enable the Bias address suggestions to the user's current location? property. If address biasing is enabled, addresses that are close to the user's location will be shown first in the list of suggestions.
Google Address Autocomplete requires an an API key for the Google Maps Javascript API. The same API key is required to use Google Maps.
For complete instructions on how to add and configure Google Address Autocomplete in an application, watch the video below:
See Also