Why should you care?

MarkupVerse branch finders and delivery ETA screens use coords for nearby results.

See it live — copy this example

Save as demo.html and open in your browser, or use Run Example below.

<section aria-labelledby="branch-loc">
  <h2 id="branch-loc">Nearest MarkupVerse branch</h2>
  <button type="button" id="locate">Use my location</button>
  <p id="coords" role="status" aria-live="polite"></p>
</section>
<script>
document.getElementById('locate').onclick = () => {
  navigator.geolocation.getCurrentPosition(
    p => { document.getElementById('coords').textContent =
      'Lat ' + p.coords.latitude.toFixed(4) + ', Lng ' + p.coords.longitude.toFixed(4); },
    () => { document.getElementById('coords').textContent = 'Location denied'; }
  );
};
</script>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

What happened?

• Always handle denial and timeout.
• HTTPS is required in production.
• Show status in a live region.

Practice next

1. Add a locate button.
2. Log coords on success.
3. Show a friendly denial message.
4. Switch to watchPosition for live tracking.
5. Round coords to two decimals in UI.

Remember

User permission required. Handle errors. HTTPS in prod.

MarkupVerse branch finder

Customer taps Use my location on mobile.

Outcome: Map centers on the closest ATM.