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.
data-ur-reverse-geocode-component="rg-button"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>