Тег <geolocation> (от английского geolocation, «определение местоположения») выводит кнопку, которую рисует сам браузер: нажатие на неё просит у пользователя доступ к местоположению, а страница получает координаты в событии location. Тег парный: закрывающий </geolocation> обязателен.
Раньше сайт обращался к navigator.geolocation из скрипта, часто сразу при загрузке, и пользователь видел запрос без понятной причины. С тегом доступ просят только после нажатия на кнопку, и браузер знает, что пользователь сделал это сам. Тег пока новый и работает не везде, поэтому внутри него прописывают запасную кнопку.
<geolocation>
<button type="button">Показать местоположение</button>
</geolocation>В этой статье
- Тег geolocation в HTML: что это и для чего нужен
- Как работает кнопка: клик, разрешение и событие location
- Атрибут autolocate: координаты без нажатия
- Атрибут watch: слежение за перемещением
- Атрибут accuracymode: точное или приблизительное место
- Запасное содержимое и проверка поддержки
- Стили geolocation: что браузер не позволяет менять
- position и error: сравнение с navigator.geolocation
- Поддержка браузерами: где работает geolocation
- Почему кнопка не срабатывает: причины блокировки
Тег geolocation в HTML: что это и для чего нужен
Кнопка внутри geolocation нужна только для старых браузеров. Если тег поддерживается, браузер выводит свою кнопку с надписью вроде «Использовать местоположение» и значком, а вложенное содержимое не показывает. Язык надписи берётся из атрибута lang. Результат приходит в событие location: в свойстве position находятся координаты, а при отказе или сбое в свойстве error ошибка.
const geo = document.querySelector("geolocation");
geo.addEventListener("location", () => {
if (geo.position) {
console.log(geo.position.coords.latitude, geo.position.coords.longitude);
} else if (geo.error) {
console.error(geo.error.message);
}
});Пример: кнопка браузера и запасная кнопка
В браузере с поддержкой видна кнопка браузера, в остальных запасная.
Как работает кнопка: клик, разрешение и событие location
Доступ запрашивается только после настоящего нажатия пользователя. Вызов click() из скрипта ничего не делает. Если разрешение уже выдано, нажатие просто обновляет координаты без запроса. Если пользователь раньше отказал или закрыл запрос, новое нажатие даёт ему возможность изменить решение. По спецификации, кроме location, у тега есть события promptaction (пользователь ответил на запрос), promptdismiss (запрос закрыт) и validationstatuschange (изменилось состояние элемента).
geo.addEventListener("location", () => { /* координаты или ошибка */ });
geo.addEventListener("promptaction", () => { /* пользователь ответил */ });
geo.addEventListener("promptdismiss", () => { /* запрос закрыли */ });Пример: журнал событий после нажатия
Пять последних событий с временем. Разрешите доступ и нажмите кнопку ещё раз.
Атрибут autolocate: координаты без нажатия
Булев атрибут autolocate получает координаты сразу, когда тег появился на странице, но только если разрешение уже выдано раньше. Без разрешения атрибут ничего не делает, и нужен обычный клик. Показывать кнопку при этом необязательно, главное, чтобы тег находился в документе.
<geolocation autolocate>
<button type="button">Показать местоположение</button>
</geolocation>Пример: autolocate и состояние разрешения
Строка сверху показывает текущее разрешение, в рамке событие location, если оно пришло.
Атрибут watch: слежение за перемещением
Без watch тег отдаёт координаты один раз, как getCurrentPosition(). С атрибутом watch событие location приходит снова при каждом изменении местоположения, как у watchPosition(). Для карты, которая следит за пользователем в дороге, нужен этот атрибут.
<geolocation watch>
<button type="button">Следить за местоположением</button>
</geolocation>Пример: два тега, с watch и без
Если вы стоите на месте, после разрешения в обеих строках будет по одному событию.
Атрибут accuracymode: точное или приблизительное место
Об атрибуте accuracymode рассказывает статья команды Google, которая добавила тег в браузер. Значение precise соответствует enableHighAccuracy: true у обычного API, значение approximate просит приблизительное местоположение. В черновике спецификации и в MDN этого атрибута пока нет, поэтому полагаться на него в рабочем коде не стоит. В ранней сборке браузера, где тег включался флагом, вместо него было свойство precise: реализация менялась.
<geolocation accuracymode="precise">
<button type="button">Показать местоположение</button>
</geolocation>Пример: что видит скрипт в вашем браузере
Кнопки меняют атрибут, а строка внизу показывает, знает ли браузер такое свойство.
Запасное содержимое и проверка поддержки
Браузер без поддержки не знает тег и обращается с ним как с неизвестным элементом, а всё, что находится внутри, выводит как обычный HTML. Поэтому запасную кнопку прописывают внутри тега, а в скрипте проверяют, существует ли интерфейс HTMLGeolocationElement. Если нет, запасная кнопка вызывает обычный button с обработчиком на navigator.geolocation.
if ("HTMLGeolocationElement" in window) {
// работаем с тегом geolocation
} else {
document.querySelector("#fallback").addEventListener("click", () => {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
});
}Пример: поддерживает ли тег ваш браузер
Три строки описывают браузер, в котором открыта страница.
Стили geolocation: что браузер не позволяет менять
Чтобы страница не могла обмануть пользователя, браузер ограничивает вид кнопки. Контраст между цветом текста и фона должен быть не меньше 3:1, прозрачность браузер всегда сохраняет равной 1, размер шрифта и размеры самой кнопки заключены в пределы, отрицательные отступы не действуют, а из преобразований разрешены только сдвиг и пропорциональное масштабирование. Слишком низкий контраст и слишком мелкий шрифт отключают кнопку, остальные значения браузер подрезает до допустимых. Свойства, которых нет в списке разрешённых, браузер игнорирует.
geolocation {
font-size: 18px;
color: #fff;
background: #1a56c8;
border-radius: 8px;
}Пример: допустимые и недопустимые стили
В браузере с поддержкой строка внизу показывает состояние элемента после каждой кнопки.
position и error: сравнение с navigator.geolocation
Результат тега устроен так же, как у обычного API. В position находится объект GeolocationPosition с полями coords.latitude, coords.longitude и coords.accuracy, а в error объект GeolocationPositionError с полями code и message. Различие в том, кто просит доступ: у скрипта запрос может появиться в любой момент, а у тега только после нажатия на кнопку.
// скрипт сам просит доступ
navigator.geolocation.getCurrentPosition(onSuccess, onError);
// тег: доступ просит пользователь, нажав кнопку
geo.addEventListener("location", () => {
const { position, error } = geo;
});Пример: тег и скрипт рядом
Обе кнопки показывают координаты в одной рамке в одном и том же формате.
Поддержка браузерами: где работает geolocation
Тег описан в черновике сообщества WICG и работает только в браузерах на одном движке, где вышел в январе 2026 года. По данным MDN на 11 октября 2026 года, статус «экспериментальный», а в Firefox и Safari поддержки пока нет. Проверка в Nu Html Checker тоже пока не знает тега и сообщает: Element “geolocation” not allowed as child of element “body” in this context. и The “geolocation” element is a completely-unknown element that is not allowed anywhere in any HTML content. Доступ к местоположению в любом случае управляется политикой разрешений: для страницы в рамке нужен атрибут allow.
<iframe src="https://example.com/map" allow="geolocation"></iframe>Пример: таблица поддержки
Версии указаны по данным MDN.
| Браузер | С какой версии | Поддержка |
|---|---|---|
| Chrome | 144 | есть |
| Chrome для Android | 144 | есть |
| Edge | 144 | есть |
| Firefox | - | нет |
| Safari | - | нет |
| Safari на iOS | - | нет |
| WebView в Android | - | нет |
Спецификация находится в черновике The HTML Geolocation Element.
Почему кнопка не срабатывает: причины блокировки
Браузер блокирует кнопку, если нарушены условия безопасного обращения. Состояние читается из свойств isValid и invalidReason, а смена состояния приходит в событие validationstatuschange. Причины по спецификации: на странице больше трёх таких тегов, лишние блокируются (MDN пишет, что отключаются все теги на странице); тег находится в fencedframe или в небезопасном iframe; тег только что добавлен или перемещён (блокировка длится около полусекунды); тег частично скрыт, обрезан, перекрыт другим элементом или не помещается в видимую область (на русском надпись заметно длиннее, чем на английском); нарушены ограничения стилей.
const geo = document.querySelector("geolocation");
geo.addEventListener("validationstatuschange", () => {
console.log(geo.isValid, geo.invalidReason);
});Пример: четвёртый тег на странице
В браузере с поддержкой лишние теги получают причину блокировки.
Частые ошибки с тегом geolocation
Большинство ошибок связано с тем, что кнопка управляется браузером, а не страницей.
| Ошибка | Что получится | Как исправить |
|---|---|---|
Пустой тег: <geolocation></geolocation> | В браузере без поддержки на странице ничего нет | Прописать внутри запасную кнопку |
Вызов geo.click() из скрипта | Ничего не происходит, доступ не просят | Ждать настоящего нажатия пользователя |
| Светло-серый текст на белом фоне | Кнопка не реагирует, но выглядит рабочей | Контраст не меньше 3:1 |
| Четыре и больше тегов на странице | Лишние теги блокируются | Использовать один тег на страницу |
| Кнопка в узком контейнере, где надпись не помещается | Часть кнопки вне видимой области, браузер блокирует её | Дать контейнеру достаточную ширину или уменьшить font-size в допустимых пределах |
Чтение geo.position сразу после загрузки | Значение null, координат ещё нет | Читать в обработчике события location |
Страница в рамке без allow="geolocation" | Доступ к местоположению запрещён политикой разрешений | Добавить allow="geolocation" к iframe |
