How to build a "track your driver" link with Firebase and Google Maps

I tried to build Uber by myself. Rider app, driver app, payments, background checks. It got zero users. But it taught me how to put a moving driver on a map, and that turns out to be the part every tow company, courier and car service wants.

The three pieces

1. The driver page

watchPosition gives you a new location as the phone moves. Do not save every one. Save at most every 10 seconds, and only when the driver moved more than about 20 meters. This one rule is most of your database bill.

import { getDatabase, ref, set } from 'firebase/database'

const db = getDatabase()
let last = null

navigator.geolocation.watchPosition((pos) => {
  const loc = { lat: pos.coords.latitude, lng: pos.coords.longitude }
  const now = Date.now()
  const moved = !last || distanceMeters(last.loc, loc) > 20
  if (last && (now - last.at < 10_000 || !moved)) return
  last = { loc, at: now }
  set(ref(db, `jobs/${jobId}/driver`), { ...loc, at: now })
}, null, { enableHighAccuracy: true })

2. The customer link

Give each job a long random ID and put it in the link, like yoursite.com/track/K7Q2M9XW. The customer page listens to that job in the database. Create the map marker once and move it on each update. My first version redrew the marker every time, and the car blinked and jumped across the map.

import { onValue, ref } from 'firebase/database'

const { AdvancedMarkerElement } = await google.maps.importLibrary('marker')
const marker = new AdvancedMarkerElement({ map }) // create once

onValue(ref(db, `jobs/${jobId}/driver`), (snap) => {
  const loc = snap.val()
  if (!loc) return
  marker.position = { lat: loc.lat, lng: loc.lng } // move, don't redraw
})

Listening with onValue is much cheaper than asking the database every few seconds. The database pushes a change only when the driver saves a new spot.

3. The ETA

Call the Routes API from the driver's spot to the customer's address, and show one number: "about 25 minutes". Never a range. I once got a tow link that said 3 to 90 minutes, which tells the customer nothing. Refresh it every minute or two, not on every GPS update.

The edge cases that took me two years

• The phone locks, or the driver opens Google Maps to navigate. The browser stops sending location and the customer's map freezes. See the background location guide for the fix.
• The customer opens the link before the driver starts. Show "not on the way yet", not an error or "completed". I shipped that bug and did not notice for a while.
• Text apps and email scanners open links seconds after you send them. Do not count those as the customer opening it.
• The dispatcher makes the job but a different driver takes it. The link has to follow whoever is driving, not whoever made it.
• The job ends. Stop sharing location and show "arrived" or "delivered", so the link is not a way to follow the driver home.
• Security: anyone with the link can see it, so make IDs long and random, and use Firebase rules so a link can only read its own job.