Skip to main content
The map info card includes a Book Uber button that opens the Uber app (or website) with the dropoff location pre-filled to your venue. Guests tap it and Uber does the rest. The full URL from index.html:
index.html
<a class="btn btn-fill btn-small"
   href="https://m.uber.com/ul/?action=setPickup&client_id=Yh7Dl6SjB56RY2JuuZF8ttVa6ryFV78W&pickup=my_location&dropoff[formatted_address]=Fortune%20Park%20Panchwati%20-%20Hotels%20in%20Kolkata%2C%20Howrah%2C%20West%20Bengal%2C%20India&dropoff[latitude]=22.593276&dropoff[longitude]=88.270277">
    <i class="fa fa-taxi"></i>&nbsp;&nbsp;Book Uber
</a>

​
URL parameters explained

​
action
string
default:"setPickup"
The action to perform. setPickup pre-fills both pickup and dropoff fields in the Uber app. This value should remain setPickup.
​
client_id
string
required
Your Uber API client ID, obtained from the Uber developer dashboard at developer.uber.com. Replace Yh7Dl6SjB56RY2JuuZF8ttVa6ryFV78W with your own client ID.
​
pickup
string
default:"my_location"
The pickup location. my_location instructs the Uber app to use the guest’s current GPS position as the pickup point. Leave this as my_location.
​
dropoff[formatted_address]
string
required
The human-readable address of the venue, URL-encoded. Update this with your venue’s full address. Use encodeURIComponent() or an online URL encoder to encode spaces and special characters.Example: Fortune Park Panchwati - Hotels in Kolkata, Howrah, West Bengal, India becomes Fortune%20Park%20Panchwati%20-%20Hotels%20in%20Kolkata%2C%20Howrah%2C%20West%20Bengal%2C%20India
​
dropoff[latitude]
number
required
The latitude of the venue. Current value: 22.593276. Replace with your venue’s latitude coordinate.
​
dropoff[longitude]
number
required
The longitude of the venue. Current value: 88.270277. Replace with your venue’s longitude coordinate.

​
How to update the button

  1. Get your Uber API client ID from developer.uber.com — create a free account and register your app
  2. Find your venue’s latitude and longitude (see the Google Maps tip)
  3. URL-encode your venue’s full address
  4. Replace the values in the href attribute in index.html:
index.html
<a class="btn btn-fill btn-small"
   href="https://m.uber.com/ul/?action=setPickup&client_id=YOUR_CLIENT_ID&pickup=my_location&dropoff[formatted_address]=YOUR%20VENUE%20ADDRESS&dropoff[latitude]=YOUR_LAT&dropoff[longitude]=YOUR_LNG">
    <i class="fa fa-taxi"></i>&nbsp;&nbsp;Book Uber
</a>
The https://m.uber.com/ul/ deep-link works as a universal link on mobile devices. On iOS and Android, if the Uber app is installed it opens directly in the app with the dropoff pre-filled. On desktop browsers it redirects to the Uber website. No JavaScript is needed — it is a plain <a href> link.

​
Location of the button in the page

The button is inside #map-content, which is the info card overlaid on the Google Map. It shares the row with the “Show map” button:
index.html
<div class="row text-center">
    <div class="col-md-6" style="padding: 5px;">
        <!-- Book Uber button -->
        <a class="btn btn-fill btn-small" href="https://m.uber.com/ul/...">
            <i class="fa fa-taxi"></i>&nbsp;&nbsp;Book Uber
        </a>
    </div>
    <div class="col-md-6" style="padding: 5px;">
        <!-- Show map button -->
        <a class="btn btn-accent btn-small" id="btn-show-map">
            <i class="fa fa-map-marker"></i>&nbsp;&nbsp;Show map
        </a>
    </div>
</div>

Build docs developers (and LLMs) love

Get started for freeTalk to us