Here, instead of the interaction loading automatically (as on the interaction page), we have a button that needs to be clicked in order for it to be activated.
We recommend using a button to enable geolocation, especially if designing for mobile. If geocoding happens on page load, the user will see a popup asking the site to use their location. If they click "no," it is difficult to get the information later on. That is why it is best to get geo-data only when a user requests it.
We need to include a button (rather obviously) for this example to work. Here is the extra attribute required.
The demonstration here activates on button click.
<form data-ur-set="reverse-geocode"> <a data-ur-reverse-geocode-component="rg-button">Click here to find your location</a> <input type="text" data-ur-reverse-geocode-component="rg-street"> <input type="text" data-ur-reverse-geocode-component="rg-city"> <input type="text" data-ur-reverse-geocode-component="rg-zip"> <select data-ur-reverse-geocode-component="rg-state"> <option value="">None</option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> ... </select> <select data-ur-reverse-geocode-component="rg-country"> <option value="" selected="selected">Select Country</option> <option value="United States">United States</option> <option value="United Kingdom">United Kingdom</option> ... </select> </form>