demo · v144
Geolocation Element
Click "share location" — the demo emits the declarative <geolocation> flow if the element exists, otherwise falls back to navigator.geolocation. The point lights up on the schematic map and the coordinates flow into the readout.
The native <geolocation> element is behind a flag. Enable
chrome://flags/#enable-experimental-web-platform-features to try the declarative form. This demo falls back to navigator.geolocation.getCurrentPosition when the element isn't recognised.
<geolocation> element:
checking…
no location shared yet
the markup
<geolocation id="geo">Share location</geolocation>
<script>
geo.addEventListener('coords', (e) => render(e.coords));
</script>
// imperative equivalent
navigator.geolocation.getCurrentPosition(({ coords }) => render(coords));