<geolocation> : l'élément de géolocalisation

Attributs

Cet élément inclut les attributs universels.

autolocate Expérimental

Un attribut booléen qui, lorsqu'il est défini sur true, définit que le navigateur doit immédiatement récupérer les données de localisation lorsque l'élément <geolocation> est rendu, à condition que l'autorisation ait été accordée précédemment. Si défini sur false, les données de localisation ne sont pas récupérées tant que l'utilisateur·ice n'active pas le contrôle. Valeur par défaut false.

Si l'autorisation n'a pas été accordée précédemment, cet attribut n'a aucun effet.

watch Expérimental

Un attribut booléen qui, lorsqu'il est défini sur true, définit que le navigateur doit récupérer les données de localisation chaque fois que la position de l'appareil de l'utilisateur·ice change. Si défini sur false, les données de localisation ne sont récupérées qu'une seule fois. Valeur par défaut false.

Description

Le élément <geolocation> fournit un contrôle déclaratif défini par le navigateur pour partager les données de localisation. Dans Chrome, par exemple, le bouton affiche une icône « épingle de carte » et un texte intuitif (« Use location » dans le contenu en anglais).

Il permet également une gestion intuitive des autorisations de l'utilisateur·ice. Par exemple, dans Chrome, si l'utilisateur·ice a précédemment refusé l'autorisation d'accéder aux données de localisation, ou a fermé la boîte de dialogue d'autorisation sans faire de choix, il·elle peut appuyer de nouveau sur le bouton pour mettre à jour son choix. Dans les cas où l'utilisateur·ice a précédemment refusé l'autorisation, les dialogues ultérieurs l'informeront qu'il·elle n'avait pas autorisé le partage des données de localisation, et lui demanderont s'il·elle souhaite continuer à refuser ou à autoriser.

Un aspect clé de l'élément <geolocation> est qu'il reflète le choix conscient de l'utilisateur·ice, et empêche les usages qui pourraient tromper l'utilisateur·ice pour qu'il·elle fournisse involontairement ses données de localisation (voir blocage de <geolocation> pour plus d'informations).

L'interface API DOM de l'élément, HTMLGeolocationElement, fournit des fonctionnalités pour accéder aux données de position retournées, au statut d'autorisation actuel et aux erreurs si la récupération des données a échoué, réduisant la quantité de logique JavaScript à écrire. Elle propose également des évènements permettant d'exécuter du code en réponse à la réception de données de localisation, aux changements du statut d'autorisation et aux interactions de l'utilisateur·ice avec la boîte de dialogue d'autorisation.

Relation avec l'API de géolocalisation

L'API Geolocation propose une alternative plus ancienne pour la gestion des données de localisation. Cette API présente certaines limites que l'élément <geolocation> vise à résoudre, notamment le fait que l'interface utilisateur et la logique sous-jacente pour demander les données doivent être implémentées depuis zéro à chaque fois, et que la gestion des autorisations peut être peu intuitive.

L'élément <geolocation> utilise en arrière-plan des fonctionnalités de l'API de géolocalisation. Par défaut, le navigateur demande les données de localisation une fois, comme si la méthode Geolocation.getCurrentPosition() avait été appelée. Cependant, si l'attribut watch est défini sur true, le navigateur met à jour les données chaque fois que la position de l'appareil change, comme si Geolocation.watchPosition() avait été appelée.

Si les données sont récupérées avec succès, elles sont disponibles dans la propriété HTMLGeolocationElement.position, qui contient un objet GeolocationPosition. Si la récupération échoue, les informations d'erreur sont disponibles dans la propriété HTMLGeolocationElement.error, qui contient un objet GeolocationPositionError.

Définir la langue du bouton

L'attribut universel lang est utilisé par l'élément <geolocation> pour sélectionner une langue pour son texte rendu. Cela signifie que vous pouvez définir un attribut lang directement sur l'élément <geolocation> ou sur l'un de ses ancêtres pour définir la langue que doit utiliser le navigateur pour le libellé du bouton.

Si aucun attribut lang approprié n'est défini, les paramètres de langue préférée du navigateur sont utilisés.

Inclure du contenu de repli

Vous pouvez inclure du contenu de repli entre les balises d'ouverture et de fermeture de l'élément <geolocation> qui sera affiché s'il n'est pas pris en charge. Par exemple, vous pouvez inclure un message « Non pris en charge » :

<geolocation>
  <p>Votre navigateur ne prend pas en charge l'élément Geolocation.</p>
</geolocation>

Cependant, une meilleure solution en pratique peut consister à inclure un élément <button> classique qui utilise l'API de géolocalisation pour récupérer les données de localisation :

<geolocation>
  <button id="fallback">Utiliser la localisation</button>
</geolocation>

Blocage de <geolocation>

Une idée clé de la conception de l'élément <geolocation> est qu'il doit refléter le choix conscient de l'utilisateur·ice d'exposer les informations de position, et empêcher les acteurs malveillants de tromper l'utilisateur·ice pour qu'il·elle active l'élément, par exemple par détournement de clic. Pour cette raison, le navigateur conserve un enregistrement des soi‑disant raisons de blocage pour chaque élément rendu.

Lorsqu'un bloqueur est actif sur un élément <geolocation>, celui‑ci est empêché de fonctionner (bloqué), temporairement ou définitivement, selon la raison. Lorsqu'un élément <geolocation> est bloqué, on dit qu'il est invalide. Vous pouvez vérifier s'il est invalide en interrogeant la propriété HTMLGeolocationElement.isValid. Vous pouvez également obtenir la raison pour laquelle il est invalide via la propriété HTMLGeolocationElement.invalidReason — consultez cette page pour la liste complète des raisons possibles.

Restreindre la mise en forme

L'élément <geolocation> est soumis à plusieurs contraintes concernant les styles CSS qui peuvent lui être appliqués. Certaines de ces contraintes visent à faire respecter des règles d'accessibilité fondamentales et entraîneront la désactivation du bouton si elles ne sont pas respectées. D'autres imposent des valeurs spécifiques ou des plages de valeurs pour certaines propriétés.

Toutes les propriétés qui ne sont pas listées dans les sous‑sections suivantes, ou qui sont logiquement équivalentes à une propriété physique listée dans les sous‑sections suivantes, sont ignorées lorsqu'elles sont définies sur l'élément <geolocation>.

Contraintes d'accessibilité

Le bouton <geolocation> rendu est désactivé (ce qui signifie qu'appuyer dessus n'a aucun effet) si les contraintes suivantes ne sont pas respectées :

• Le ratio de contraste entre le contraste des couleurs des propriétés CSS color et background-color doit être d'au moins 3:1.
• La propriété CSS font-size ne doit pas être inférieure à la valeur small (dans le cas des mots‑clés), ni à sa valeur calculée (dans le cas des autres types de valeurs).

Définir les contraintes de valeur

Les contraintes suivantes de valeurs de propriétés CSS s'appliquent à l'élément <geolocation>. Si vous tentez de définir ces propriétés en dehors des contraintes listées pour l'élément <geolocation>, la valeur est ajustée pour respecter la contrainte (dans le cas d'une contrainte de valeur exacte) ou pour correspondre à la valeur calculée la plus proche, supérieure ou inférieure (dans le cas d'une contrainte de plage).

opacity

1.0

line-height

normal

white-space

nowrap

user-select

none

appearance

auto

box-sizing

content-box

vertical-align

middle

text-emphasis

initial

text-shadow

initial

outline-offset

0 ou supérieur.

font-weight

200 ou supérieur.

word-spacing

Entre 0 et 0.5em, inclus.

letter-spacing

Entre -0.05em et 0.2em, inclus.

letter-spacing

Entre -0.05em et 0.2em, inclus.

min-height

1em ou supérieur.

max-height

3em ou moins. none est une valeur acceptée.

min-width

La valeur calculée de fit-content ou moins.

border-width

1em ou moins.

Contraintes complexes

Les contraintes suivantes sont plus complexes que de simples contraintes de valeur :

Rembourrage en direction bloc

Si la taille de bloc (block-size) est définie sur auto, les marges internes padding-block-start et padding-block-end (et les propriétés physiques équivalentes pour le mode d'écriture courant) sont limitées à 1em au maximum et doivent être égales.

Rembourrage en direction en ligne

Si la inline-size est définie sur auto, les padding-inline-start et padding-inline-end (et les propriétés physiques équivalentes pour le mode d'écriture courant) sont limitées à 5em au maximum et doivent être égales.

Propriétés pouvant être définies normalement

Les propriétés CSS suivantes peuvent être utilisées normalement :

• font-kerning
• font-optical-sizing
• font-stretch
• font-synthesis-weight
• font-synthesis-style
• font-synthesis-small-caps
• font-feature-settings
• forced-color-adjust
• text-rendering
• align-self
• anchor-name
• aspect-ratio
• border, border-top, border-right, border-bottom et border-left
• clear
• color-scheme
• contain-intrinsic-width
• contain-intrinsic-height
• container-name
• container-type
• counter-reset, counter-increment et counter-set
• flex, flex-grow, flex-shrink et flex-basis
• float
• height
• isolation
• justify-self
• left
• order
• orphans
• outline, outline-color et outline-style
• overflow-anchor
• overscroll-behavior, overscroll-behavior-inline, overscroll-behavior-block, overscroll-behavior-x et overscroll-behavior-y
• page
• position
• position-anchor
• right
• scroll-margin, scroll-margin-top, scroll-margin-right, scroll-margin-bottom et scroll-margin-left
• scroll-padding, scroll-padding-top, scroll-padding-right, scroll-padding-bottom, scroll-padding-left, scroll-padding-inline-start, scroll-padding-block-start, scroll-padding-block-start, scroll-padding-inline-end et scroll-padding-block-end
• text-spacing-trim
• text-transform
• top
• visibility
• x
• y
• ruby-position
• user-select
• width
• will-change
• z-index

Accessibilité

L'élément <geolocation> possède un nom accessible rédigé dans la langue définie. Il possède également un role de button afin d'être reconnu comme un bouton par les lecteurs d'écran.

De plus, l'élément <geolocation> a une valeur tabindex par défaut de 0, ce qui lui permet de se comporter comme un véritable <button> en ce qui concerne la sélection clavier.

Enfin, reportez‑vous à la section Contraintes d'accessibilité pour obtenir des informations sur les contraintes de mise en forme appliquées à l'élément <geolocation> afin de garantir le respect des exigences d'accessibilité fondamentales.

Exemples

Exemple simple d'utilisation

Cet exemple utilise l'élément <geolocation> pour récupérer votre position actuelle, qui est affichée sous le bouton dans un élément <p>. L'exemple utilise également un bouton <button> classique comme solution de repli pour récupérer les données de localisation dans les navigateurs qui ne prennent pas en charge <geolocation>.

HTML

Nous incluons un élément <geolocation> avec un bouton <button> de repli imbriqué à l'intérieur, qui sera affiché dans les navigateurs ne prenant pas en charge <geolocation>. Nous incluons également un élément <p> pour afficher les données de localisation et les erreurs.

<geolocation>
  <button id="fallback">Utiliser la localisation</button>
</geolocation>
<p id="output"></p>

JavaScript

Dans notre script, nous commençons par récupérer une référence à l'élément <p> de sortie. Nous détectons ensuite si l'élément <geolocation> est pris en charge en testant typeof HTMLGeolocationElement === "function" :

• Si l'élément est pris en charge, nous récupérons d'abord une référence à l'élément <geolocation> puis nous ajoutons un écouteur d'évènement location. Lorsque le bouton est pressé et que les données sont récupérées, l'écouteur affiche les coordonnées (latitude, longitude) dans l'élément <p> de sortie (récupérées via la propriété position), ou un message d'erreur si la récupération des données a échoué (récupéré via la propriété error).
• Si l'élément n'est pas pris en charge, nous récupérons une référence au bouton <button> de repli et nous récupérons et affichons les mêmes données, sauf que cette fois nous utilisons un écouteur d'évènement click sur le bouton, et un appel à Geolocation.getCurrentPosition() pour récupérer les données.

const outputElem = document.querySelector("#output");

if (typeof HTMLGeolocationElement === "function") {
  const geo = document.querySelector("geolocation");
  geo.addEventListener("location", () => {
    if (geo.position) {
      outputElem.textContent += `(${geo.position.coords.latitude},${geo.position.coords.longitude}), `;
    } else if (geo.error) {
      outputElem.textContent += `${geo.error.message}, `;
    }
  });
} else {
  const fallback = document.querySelector("#fallback");
  fallback.addEventListener("click", () => {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        outputElem.textContent += `(${position.coords.latitude}, ${position.coords.longitude}), `;
      },
      (error) => {
        outputElem.textContent += `${error.message}, `;
      },
    );
  });
}

Résultat

Voir ce code en fonctionnement ^(angl.) (code source ^(angl.)). Vous pouvez aussi trouver une version de cet exemple qui inclut l'attribut watch sur l'élément <geolocation> et qui récupère donc les données de localisation à chaque changement de position de l'appareil de l'utilisateur·ice (voir en fonctionnement ^(angl.), et le code source ^(angl.)).

Essayez d'afficher les démonstrations dans un navigateur pris en charge et dans un navigateur non pris en charge si possible, et notez la différence dans le flux du dialogue d'autorisation lorsque vous choisissez d'autoriser ou de refuser la permission d'utiliser geolocation.

Pour un guide détaillé d'un exemple plus complet qui utilise les données de localisation pour créer une carte de votre zone locale, consultez la page de référence HTMLGeolocationElement.

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'interface API HTMLGeolocationElement
• La politique de permissions geolocation
• L'API Geolocation
• L'API Permissions
• Présentation de l'élément HTML <geolocation> ^(angl.) sur developer.chrome.com (2026)