Fork me on GitHub

Geolocation with a Button


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.

to be applied to a button tag


The demonstration here activates on button click.


Click here to find your location

The Code

    <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 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>

Back to Geolocation Widget