v144 · geo · demo

Map Embed

Take a location from a <geolocation> element (or fall back to navigator.geolocation) and plot it on a world map. Shows the coordinate in both decimal and DMS (degrees, minutes, seconds) format, the accuracy circle radius, and timestamp. No external API keys required — the map is a self-contained SVG.

<geolocation> element: checking… navigator.geolocation: checking…
Origin Trial The <geolocation> element is behind chrome://flags/#capability-elements. This demo falls back to navigator.geolocation.getCurrentPosition() when the element is unavailable. If geolocation is denied or unavailable entirely, a demo with London coordinates is shown.

Press “Get Location” to request your coordinates.

0° equator

the API

// Feature detect <geolocation> element
const hasGeoElem = typeof HTMLElement !== 'undefined'
  && customElements.get && customElements.get('geolocation');

if (hasGeoElem) {
  const geo = document.createElement('geolocation');
  geo.addEventListener('locate', (e) => {
    const { latitude, longitude, accuracy } = e.coords;
    plotOnMap(latitude, longitude, accuracy);
  });
  document.body.appendChild(geo);
} else {
  // Fallback to legacy API
  navigator.geolocation.getCurrentPosition((pos) => {
    plotOnMap(pos.coords.latitude, pos.coords.longitude, pos.coords.accuracy);
  });
}

see also