HTMLGeolocationElement

Want more browser support for this feature? Tell us why.

HTMLGeolocationElement HTML DOM API <geolocation>

HTMLElement

: <geolocation> HTMLGeolocationElement API

EventTarget Node Element HTMLElement HTMLGeolocationElement

HTMLGeolocationElement(): HTMLGeolocationElement Document.createElement() DOM

HTMLElement

autolocate: <geolocation> <geolocation> autolocate
error: GeolocationPositionError
initialPermissionStatus: geolocation
invalidReason: <geolocation>
isValid: <geolocation>
permissionStatus: geolocation
position: GeolocationPosition
watch: <geolocation> watch

HTMLElement

location
promptaction: <geolocation> geolocation
promptdismiss: <geolocation> Esc
validationstatuschange: <geolocation> isValid

HTMLGeolocationElement <geolocation>

API

Geolocation.getCurrentPosition() watch true Geolocation.watchPosition()

location

promptaction promptdismiss <geolocation>

<geolocation> HTMLGeolocationElement.isValid HTMLGeolocationElement.invalidReason

<geolocation> HTMLGeolocationElement

<geolocation>

<geolocation> Leaflet JS <button>

HTML

<geolocation> autolocate geolocation <geolocation><geolocation> <button>

html

<geolocation autolocate>
  <button id="fallback"></button>
</geolocation>

<p>

html

<p id="status">:</p>

<div>

html

<div id="map"></div>

JavaScript

<p>

const statusElem = document.querySelector("#status");

typeof HTMLGeolocationElement === "function" <geolocation>

if (typeof HTMLGeolocationElement === "function") {
  // <geolocation> 
} else {
  // <geolocation> 
}

<geolocation> if <geolocation>

const geo = document.querySelector("geolocation");

location HTMLGeolocationElement HTMLGeolocationElement.position drawMap() HTMLGeolocationElement HTMLGeolocationElement.error

geo.addEventListener("location", () => {
  if (geo.position) {
    console.log(
      `${geo.position.coords.latitude},${geo.position.coords.longitude}`,
    );
    drawMap(geo.position.coords.latitude, geo.position.coords.longitude, geo);
  } else if (geo.error) {
    console.log(geo.error.message);
  }
});

promptdismiss promptaction HTMLGeolocationElement <geolocation>

geo.addEventListener("promptdismiss", notifyUserRetrySelection);
geo.addEventListener("promptaction", notifyUserGrantPermission);

if 2 notifyUserRetrySelection() notifyUserGrantPermission() HTMLGeolocationElement.permissionStatus denied prompt

function notifyUserRetrySelection() {
  statusElem.textContent =
    "";
}

function notifyUserGrantPermission() {
  if (geo.permissionStatus === "denied" || geo.permissionStatus === "prompt") {
    statusElem.textContent =
      "";
  }
}

<geolocation> else <button>

const fallback = document.querySelector("#fallback");

click HTMLButtonElement Geolocation.getCurrentPosition() HTMLGeolocationElement drawMap() HTMLButtonElement

fallback.addEventListener("click", () => {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      drawMap(position.coords.latitude, position.coords.longitude, fallback);
    },
    (error) => {
      statusElem.textContent += `${error.message}, `;
    },
  );
});

drawMap() Leaflet JS Leaflet Quick Start Guide

function drawMap(lat, long, btn) {
  const map = L.map("map").setView([lat, long], 13);
  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
    maxZoom: 19,
    attribution:
      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  }).addTo(map);
  const marker = L.marker([lat, long]).addTo(map);

  statusElem.textContent = "";
  btn.style.display = "none";
}

geolocation

geolocation
geolocation promptdismiss promptaction


The HTML Geolocation Element # htmlgeolocationelement

<geolocation>
geolocation
API
API
<geolocation> HTML - developer.chrome.com (2026)

MDN

MDN 2026211

GitHub