Новый HTML-элемент Geolocation

Если вы когда-либо настраивали navigator.geolocation.getCurrentPosition(), вы знаете процедуру: написать колбэк, обработать ошибку, управлять состоянием разрешений и надеяться, что браузер не проглотит запрос молча, потому что пользователь отклонил его слишком много раз. Новый HTML-элемент <geolocation> использует совершенно другой подход — декларативная геолокация в HTML, обрабатываемая самим браузером.

Вот что это такое, как это работает и что нужно знать перед использованием.

Что такое HTML-элемент <geolocation>?

HTML-элемент <geolocation> — это экспериментальная кнопка, управляемая браузером, которая позволяет пользователям делиться своим местоположением непосредственно со страницы. Вместо того чтобы ваш JavaScript инициировал запрос разрешения, пользователь сам активирует элемент управления. Браузер обрабатывает процесс получения разрешения, а вы слушаете результат.

Он появился в Chrome 144. По состоянию на начало 2026 года это остаётся функцией, разработанной Chromium, и ещё не реализована в других движках. Относитесь к этому как к чему-то для экспериментов, а не для повсеместного внедрения без запасного варианта. Вы можете отслеживать текущий статус реализации на https://caniuse.com/mdn-html_elements_geolocation.

Проблема с Geolocation API

navigator.geolocation API является императивным. Ваш скрипт вызывает getCurrentPosition(), браузер решает, показывать ли запрос, и если пользователь отклонял этот запрос несколько раз, Chrome может тихо заблокировать его на определённый период времени. Никакой ошибки, никакой обратной связи — только тишина.

Отсутствие контекста усугубляет ситуацию. Запрос, который появляется без объяснений, рефлекторно отклоняется. Это отклонение может стать постоянным, и у пользователей нет очевидного способа отменить его.

Как декларативная геолокация в HTML решает эту проблему

Элемент <geolocation> переворачивает модель. Пользователь нажимает на кнопку. Это нажатие и есть сигнал разрешения. Браузер знает, что запрос исходит от преднамеренного действия пользователя, что помогает избежать сценариев тихой блокировки и даёт пользователям более понятный путь восстановления, если они ранее отказали в доступе.

Интерфейс HTMLGeolocationElement предоставляет результат непосредственно на элементе:

<geolocation onlocation="handleLocation(event)"></geolocation>

function handleLocation(event) {
  if (event.target.position) {
    const { latitude, longitude } = event.target.position.coords;
    console.log(latitude, longitude);
  } else if (event.target.error) {
    console.error(event.target.error.message);
  }
}

Элемент предоставляет свойства position и error, и вы слушаете события, такие как location, когда браузер возвращает результат.

Ключевые атрибуты

• autolocate — Если разрешение было предоставлено ранее, запускает событие location при загрузке страницы без необходимости нажатия. Не делает ничего, если разрешение ещё не было предоставлено.
• watch — Отражает watchPosition(), срабатывая непрерывно при перемещении устройства.
• accuracymode — Принимает значения "precise" или "approximate". Точный режим соответствует enableHighAccuracy: true и меняет иконку кнопки на перекрестие. Обратите внимание, что на десктопах разница часто незначительна — протестируйте на мобильном устройстве на открытом воздухе, чтобы увидеть реальную разницу.

Одна особенность, которую стоит знать: вы можете использовать не более трёх элементов <geolocation> на странице. Превысьте это количество, и все они перестанут работать.

Элемент по-прежнему опирается на ту же базовую модель безопасности, что и Geolocation API, которая требует безопасного контекста (HTTPS) и явного разрешения пользователя.

Geolocation API против HTML-элемента Geolocation: что использовать?

Прямо сейчас — оба. HTML-элемент <geolocation> не заменяет navigator.geolocation — он его оборачивает. Используйте элемент там, где он поддерживается, и корректно откатывайтесь:

<geolocation onlocation="updateMap()">
  <!-- Отображается только в браузерах, которые не поддерживают <geolocation> -->
  <button onclick="navigator.geolocation.getCurrentPosition(updateMap)">
    Использовать моё местоположение
  </button>
</geolocation>

Поддерживающие браузеры подавляют дочернее содержимое. Неподдерживающие браузеры отображают запасную кнопку. Если вы хотите более автоматизированный подход, есть полифил на npm, который подставляет пользовательский элемент на основе стандартного API.

Определение поддержки функции простое:

if ('HTMLGeolocationElement' in window) {
  // элемент поддерживается
} else {
  // используйте navigator.geolocation
}

Стилизация имеет жёсткие ограничения

Элемент выглядит как кнопка, но не ведёт себя как таковая с точки зрения CSS. Браузер применяет ограничения для предотвращения обманных паттернов: opacity зафиксирована на 1, контраст между текстом и фоном должен быть не менее 3:1, а искажающие трансформации заблокированы. Если контраст или размер шрифта опускается ниже минимального порога, кнопка не деактивируется визуально — она просто перестаёт работать. Вы можете использовать псевдокласс :granted для стилизации кнопки после предоставления разрешения.

Куда это движется

Элемент <geolocation> — первый в планируемой серии элементов для специфических возможностей. Элемент <usermedia> для доступа к камере и микрофону уже находится в пробном периоде. Паттерн — декларативный, инициируемый пользователем, опосредованный браузером — явно является направлением, в котором движется платформа.

Заключение

Элемент <geolocation> представляет значимый сдвиг в том, как браузеры обрабатывают чувствительные разрешения. Перемещая триггер со скрипта на действие пользователя, он обходит многие подводные камни тихой блокировки императивного API и даёт пользователям более понятный контроль над тем, когда и делиться ли своим местоположением. Поддержка браузеров всё ещё узкая, но паттерн отката чистый, а поверхность API минимальна. Начните экспериментировать с прогрессивным улучшением уже сегодня — UX разрешений действительно лучше для пользователей, а декларативная модель — это то, куда движется веб-платформа.

Часто задаваемые вопросы

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.