Blocs de carte : Afficher un emplacement sans masquer l'adresse

Un bloc de carte aide un visiteur à comprendre où se trouve un lieu réel et à passer de la lecture à la navigation. Son contenu durable est l’adresse vérifiée en HTML ; la carte visuelle est une aide facultative à l’orientation. L’implémentation par défaut réserve la zone de la carte, affiche une solution de repli statique légère et charge un fournisseur interactif approuvé uniquement après que le visiteur l’a demandé.

National Gallery
Trafalgar Square, London WC2N 5DN, United Kingdom
Carte non chargée. Ouvrez l’emplacement dans votre application de cartes, ou activez Charger la carte interactive lorsque vous avez besoin d’inspecter les rues environnantes.

Cette façade rendue est utile avant toute requête tierce. Elle nomme le lieu, expose l’adresse sous forme de texte sélectionnable, explique l’état non chargé et propose deux options claires : ouvrir une carte externe ou charger délibérément la carte intégrée.

Pourquoi cet élément est important

Les questions de localisation sont pratiques. Un visiteur peut chercher à savoir si une succursale est assez proche, vérifier de quel côté d’une voie ferrée elle se trouve, trouver l’entrée correcte, ou comparer les transports en commun avec le stationnement. Une carte réduit le travail mental de traduction d’une adresse inconnue en contexte spatial. Elle peut rendre visibles les points de repère et les relations entre rues plus rapidement qu’un paragraphe.

Ce confort ne fait pas de la carte la source de vérité. Les visiteurs peuvent copier une adresse, l’envoyer à une autre personne ou la lire avec une technologie d’assistance. Les tuiles de carte ne peuvent pas prendre en charge ces actions de manière fiable, et des données faibles, des paramètres de confidentialité ou une défaillance du fournisseur peuvent les bloquer. L’adresse doit rester utile sans la carte.

Une carte intégrée peut ajouter une iframe, du JavaScript, des polices, des images et des requêtes tierces. Ces ressources entrent en concurrence avec le contenu de la page et peuvent divulguer une adresse IP ou initier un stockage soumis à consentement. Un visiteur qui n’utilise jamais la carte ne devrait pas en payer le coût.

L’extractibilité automatique signifie qu’un logiciel peut identifier le lieu sans interpréter les pixels de la carte ni exécuter le fournisseur. Les robots d’exploration, les systèmes d’IA, les lecteurs d’écran, les outils de traduction et les pipelines de données locales ont besoin d’un nom de lieu, d’une adresse postale complète, de coordonnées lorsqu’elles sont réglementées, et d’un lien de destination stable en HTML ou dans des champs structurés. Une URL d’iframe n’est pas une adresse fiable. Les étiquettes des fournisseurs peuvent changer, et les épingles peuvent être légèrement déplacées. Le même enregistrement d’emplacement vérifié doit alimenter l’adresse visible, le marqueur de la carte, le lien de navigation et toute donnée structurée éligible.

Les règles de rédaction des éléments prévalent : choisissez un élément typé par sa fonction, pas par son apparence. Si l’objectif est l’orientation spatiale autour d’un lieu vérifié, utilisez un bloc de carte. Si l’objectif est de publier des coordonnées, utilisez un bloc horaires et contact ou un bloc NAP et laissez la carte consommer le même enregistrement d’adresse. Si l’objectif est de réserver un créneau, utilisez un bloc de réservation .

Quand l’utiliser

Utilisez un bloc de carte lorsque voir le lieu dans son environnement aide le lecteur à accomplir une tâche dépendante de l’emplacement. Les cas d’usage typiques incluent un magasin, un bureau, une clinique, un lieu de réception, un point de retrait, une salle d’exposition, un hôtel, une attraction, une succursale, une entrée d’événement ou une limite de zone de service. Il est particulièrement utile lorsque l’entrée diffère de l’adresse postale, que les rues environnantes sont confuses, que les chemins d’accès nécessitent une explication, ou que les transports en commun et le stationnement ont un impact sur la visite.

Confirmez le marqueur par rapport à l’entrée réelle ou au point de service plutôt que d’accepter le premier résultat de géocodage du fournisseur. Pour un lieu situé dans un grand bâtiment, indiquez l’étage, l’unité ou l’entrée dans le texte.

Les cas limites créent souvent des cartes attrayantes mais peu utiles :

• Une liste de villes desservies : il s’agit d’une déclaration de zone de service, pas d’une preuve d’emplacement physique. Ne placez pas d’épingles au centre des villes pour suggérer des bureaux.
• Une adresse postale sans accès visiteur : publiez les coordonnées postales et indiquez que les visites sont impossibles. Une carte suggérerait une action d’arrivée non prise en charge.
• Une entreprise distante ou exclusivement en ligne : un siège social enregistré peut être pertinent sur le plan juridique, mais il ne devient pas une destination client simplement parce qu’une intégration peut le localiser.
• Des indications pas à pas : créez un lien vers un fournisseur de navigation et fournissez des notes spécifiques à l’itinéraire. Une carte statique intégrée ne peut pas tenir compte du trafic, des fermetures ou du point de départ du visiteur.
• De nombreux emplacements : utilisez un localisateur avec une liste de résultats textuels. Un nuage d’épingles ne peut pas remplacer les pages individuelles des succursales.
• Preuve de présence locale : une carte n’est pas une preuve qu’une équipe opère sur place. Élayez l’affirmation avec une identité cohérente, l’adresse, les coordonnées, les horaires et un contenu propre à la succursale.
• Contexte géographique décoratif : si l’emplacement n’affecte pas la tâche, omettez la carte. Une skyline de ville ou un contour régional relève d’un objectif visuel différent.

Où le placer

Placez la carte immédiatement après le nom du lieu, l’adresse complète et tout qualificatif essentiel à la visite. Sur une page d’emplacement, la séquence habituelle est : introduction, adresse et coordonnées, carte, notes d’arrivée, horaires, puis action de visite ou de réservation. Si les itinéraires sont la réponse principale, résumez-les avant la carte.

Gardez l’adresse, la façade de la carte, la commande de chargement, le lien de repli, la légende et la note d’itinéraire dans une même région étiquetée. Le visiteur ne devrait pas avoir à traverser une section de témoignages ou de marketing pour trouver l’adresse qui correspond à l’épingle. Un lien « Obtenir l’itinéraire » doit utiliser les mêmes coordonnées ou le même identifiant de lieu que le marqueur affiché.

Le bloc peut se trouver à proximité des horaires d’ouverture pour la même succursale, mais pas à côté d’une adresse contradictoire, d’une autre carte, d’une vidéo en lecture automatique ou d’une publicité stylisée comme une commande. Ne le placez pas dans un carrousel, un accordéon, une modale obligatoire, un onglet masqué ou une cellule de tableau étroite.

Ne placez pas la carte entre un avertissement et l’instruction qu’il qualifie, ni entre une action de réservation et ses prérequis. Ne superposez jamais du texte d’adresse essentiel, le libellé de consentement ou le seul lien d’itinéraire sur les tuiles de la carte. Sur mobile, préservez cet ordre de lecture : nom du lieu, adresse, qualificatif de visite, solution de repli, commande de chargement, zone de carte, puis itinéraires.

Anatomie

1. Nom du lieu : identifie la succursale, le lieu ou la destination représenté par le marqueur.
2. Adresse textuelle complète : inclut chaque ligne d’adresse, localité, code postal et pays nécessaire pour distinguer le lieu.
3. Qualificatif de visite : indique l’entrée, l’unité, l’étage, l’obligation de rendez-vous, la restriction de visite ou le fait d’accessibilité lorsqu’il modifie l’arrivée.
4. Zone réservée : fixe la largeur et le rapport hauteur/largeur avant le chargement des ressources interactives, empêchant les mouvements de mise en page.
5. Solution de repli statique : fournit un contexte spatial utile sans scripts ; elle doit être un véritable élément généré avant d’être référencée.
6. Marqueur : représente le point d’arrivée vérifié, pas simplement un code postal ou un centroïde administratif.
7. Commande de chargement : est un vrai bouton avec un nom accessible spécifique, par exemple « Charger la carte interactive pour National Gallery ».
8. Avis concernant le fournisseur : nomme le tiers et explique que l’activation peut établir une connexion avec lui.
9. Lien d’itinéraire : ouvre une destination HTTPS stable pour la navigation sans nécessiter le lecteur intégré.
10. Légende ou note de point de repère : explique la conclusion utile de la carte, par exemple l’entrée faisant face à une rue nommée.
11. Enregistrement d’emplacement : fournit les coordonnées régies, l’identifiant du lieu et la date de vérification au moteur de rendu.
12. État d’échec : préserve l’adresse, le lien d’itinéraire et l’option de nouvelle tentative si le fournisseur ne peut pas se charger.

Exemples de conception

Chaque variante conserve l’adresse en HTML, réserve les dimensions de la carte et fournit un lien d’itinéraire direct. Seul le comportement de chargement change.

Carte statique avec itinéraires externes — coût le plus bas

Utilisez une image de carte optimisée lorsque l’orientation est utile mais que le panoramique et le zoom ne le sont pas. Le texte alternatif énonce sa conclusion spatiale ; la légende porte les points de repère. Publiez le chemin uniquement après que l’élément existe.

Carte interactive cliquer-pour-charger — par défaut

Affichez d’abord une solution de repli statique ou un panneau réservé neutre. Un bouton charge l’iframe approuvée après une activation explicite. Cela protège la vitesse de la page et rend la connexion tierce intentionnelle, tout en conservant le panoramique, le zoom et l’inspection de rue disponibles à la demande.

Carte soumise à consentement

Utilisez cette variante lorsque la politique de confidentialité du site exige un consentement avant de contacter le fournisseur. Expliquez la conséquence en langage clair et proposez le lien d’itinéraire sans exiger de consentement. Le refus ne doit pas masquer l’adresse ni empêcher le reste de la page de fonctionner.

Carte interactive toujours chargée — exception mesurée

À utiliser uniquement lorsque l’interaction est centrale, le contact avec le fournisseur est autorisé et la mesure sur le terrain accepte le coût. Le chargement différé peut encore s’initialiser à mesure que le visiteur s’approche. Conservez une solution de repli rendue par le serveur car loading="lazy" ne peut pas empêcher la défaillance du fournisseur.

Bloc mono-emplacement dans un localisateur

Pour une page multi-emplacements, associez la carte sélectionnée à une liste de résultats textuels. Le chargement d’une succursale sélectionnée rend l’interaction compréhensible ; le changement de sélection met à jour le nom du lieu, l’adresse, le marqueur et le lien d’itinéraire ensemble. La liste reste utilisable sans la carte.

Paramètres

« Source » désigne l’endroit d’où le moteur de rendu obtient la valeur rédigée. Le système d’emplacement faisant autorité reste responsable de la vérification de l’adresse réelle et des coordonnées.

Le moteur de rendu doit construire les URL des fournisseurs à partir d’identifiants autorisés et de coordonnées numériques. Les auteurs ne doivent pas coller du HTML d’iframe arbitraire, des clés API, des jetons d’accès ou du JavaScript dans le corps. Six décimales localisent un point avec une précision bien supérieure à ce dont un visiteur a normalement besoin ; conservez moins de chiffres lorsque publier une entrée privée exacte créerait un risque de sécurité ou de confidentialité.

Syntaxe et exemples de code

Ces exemples portables décrivent un modèle de contenu canonique. Un projet doit implémenter et tester le moteur de rendu correspondant avant que les auteurs n’utilisent la syntaxe en production.

Directive Markdown portable

:::map{variant=facade place-id="north-street-clinic" latitude=51.454514 longitude=-2.587910 zoom=16 aspect-ratio="4/3" provider=osm directions-url="https://www.openstreetmap.org/directions?to=51.454514,-2.587910" verified=2026-08-27}
## North Street Clinic

18 North Street, Bristol BS1 3PR, United Kingdom

Use the courtyard entrance beside the pharmacy. Step-free access is available from North Street.
:::

Le premier titre fournit title ; la ligne suivante fournit l’adresse structurée ; et le reste du corps fournit la légende ou la note d’arrivée.

Correspondance de shortcode Hugo

Utilisez uniquement des paramètres nommés. Cette notation documente l’adaptateur prévu ; elle n’affirme pas qu’un shortcode de carte existe déjà dans ce dépôt.

{{< map variant="facade" placeId="north-street-clinic" latitude="51.454514" longitude="-2.587910" zoom="16" aspectRatio="4/3" provider="osm" directionsUrl="https://www.openstreetmap.org/directions?to=51.454514,-2.587910" verified="2026-08-27" >}}
## North Street Clinic

18 North Street, Bristol BS1 3PR, United Kingdom

Use the courtyard entrance beside the pharmacy. Step-free access is available from North Street.
{{< /map >}}

L’adaptateur doit réserver le ratio, rendre l’adresse et la solution de repli sur le serveur, et créer l’iframe uniquement après le déclenchement prévu. Il ne doit jamais exposer de clé API de fournisseur dans le contenu rédigé.

Bloc WordPress

<!-- wp:amicited/map {"variant":"facade","placeId":"north-street-clinic","latitude":51.454514,"longitude":-2.587910,"zoom":16,"aspectRatio":"4/3","provider":"osm","directionsUrl":"https://www.openstreetmap.org/directions?to=51.454514,-2.587910","verified":"2026-08-27"} -->
<h2>North Street Clinic</h2>
<address>18 North Street, Bristol BS1 3PR, United Kingdom</address>
<p>Use the courtyard entrance beside the pharmacy. Step-free access is available from North Street.</p>
<!-- /wp:amicited/map -->

Un bloc natif doit stocker les coordonnées sous forme de nombres, garder les champs d’adresse structurés, valider le fournisseur et rendre une façade côté serveur sécurisée. L’aperçu de l’éditeur peut afficher une représentation statique plutôt que d’initialiser le fournisseur complet.

Exemples de bonnes et mauvaises pratiques

Bon exemple

North Street Clinic
18 North Street, Bristol BS1 3PR, United Kingdom
Use the courtyard entrance beside the pharmacy. Step-free access is available from North Street.
Charger la carte interactive · Ouvrir l’itinéraire dans une application de cartes

Cet exemple fonctionne car le visiteur peut identifier, copier et naviguer vers le lieu sans l’intégration. La note d’entrée résout une réelle ambiguïté d’arrivée. Le chargement du tiers est un choix, et les deux actions énoncent clairement ce qui se produit.

Mauvais exemple

Trouvez-nous ici !
[carte interactive pleine largeur avec une épingle non étiquetée]

Cet exemple échoue car « ici » n’identifie pas un lieu, l’adresse n’existe qu’à l’intérieur des pixels du fournisseur, et l’épingle peut représenter un code postal plutôt qu’une entrée. La carte chargée immédiatement ajoute un coût même pour les visiteurs qui ne l’utilisent pas. Il n’y a pas de solution de repli, de date de vérification, de note d’arrivée ni de lien de navigation accessible. Ajouter une adresse dans l’attribut title de l’iframe améliorerait l’étiquette du cadre mais ne créerait pas de texte de page sélectionnable.

Balisage de schéma et accessibilité

Un bloc de carte n’a pas de type Schema.org dédié. Les champs vérifiés peuvent alimenter les Organization, sous-type LocalBusiness, Place, PostalAddress ou GeoCoordinates appropriés lorsque la page représente cette entité. Utilisez un seul enregistrement d’emplacement partagé ; l’adresse visible, le marqueur, l’URL canonique de la succursale et le JSON-LD doivent être cohérents.

N’ajoutez pas hasMap uniquement pour donner l’impression que la page est plus complète. Lorsqu’il est utilisé, il doit pointer vers une URL de carte stable pour le même lieu, et non vers une URL de session expirante ou un point d’accès iframe avec une clé exposée. Une entreprise de zone de service sans emplacement client public doit décrire sa zone de service honnêtement et ne doit pas publier de locaux inventés ni de coordonnées privées trop précises.

L’accessibilité commence par l’indépendance vis-à-vis de la carte. Placez le nom du lieu et l’adresse complète en HTML, en utilisant <address> uniquement pour les coordonnées pertinentes. Fournissez un lien d’itinéraire normal. Décrivez les entrées, les points de repère, les transports, le stationnement et l’accès sans marche dans le texte. Le texte alternatif de la carte statique doit communiquer la conclusion utile, pas énumérer chaque rue.

La commande de chargement doit être un <button> utilisable au clavier avec un focus visible et un nom accessible lié au lieu. Le chargement ne doit pas déplacer le focus de manière inattendue. Après activation, annoncez un bref état tel que « Carte interactive chargée », puis conservez le focus sur la commande d’origine ou déplacez-le uniquement lorsque l’interface dispose d’un point d’entrée clavier documenté. Donnez à chaque iframe un titre unique, par exemple « Carte interactive pour North Street Clinic ».

Les commandes du fournisseur doivent rester utilisables aux largeurs réduites et à 200 % de zoom. Ne bloquez pas le focus clavier à l’intérieur de l’iframe. Ne vous fiez pas à la couleur des épingles, aux gestes de glisser-déposer, au survol ou aux étiquettes visuelles des rues pour les informations essentielles. Si la carte échoue ou si le consentement est refusé, maintenez la région réservée stable et exposez l’adresse, la note d’arrivée, le lien d’itinéraire externe et l’action de nouvelle tentative.

Règles de rédaction

Commencez par le nom public officiel du lieu en deux à dix mots. Enchaînez avec l’adresse postale complète telle qu’elle est stockée dans l’enregistrement d’emplacement faisant autorité. N’abrégez pas une unité, un bâtiment, une localité ou un code postal nécessaire pour atteindre la bonne entrée. Incluez le pays lorsque la page peut recevoir du trafic international ou lorsque le nom de la ville est ambigu.

Ajoutez une note d’arrivée de 8 à 35 mots uniquement lorsqu’elle modifie ce que le visiteur doit faire. Nommez un point de repère durable ou une relation d’entrée : « Utilisez l’entrée de la cour à côté de la pharmacie » est utile ; « Vous ne pouvez pas nous manquer » ne l’est pas. Les fermetures de routes temporaires, les itinéraires de construction et les entrées provisoires nécessitent un propriétaire et une date de révision ailleurs dans le système de contenu.

Utilisez un seul bloc de carte pour une destination sélectionnée. Un localisateur peut changer cette destination, mais chaque état sélectionné doit mettre à jour le titre, l’adresse, le marqueur, la légende et le lien de manière atomique. Affichez un marqueur principal par défaut. Les points de repère secondaires ne peuvent apparaître que lorsqu’ils expliquent l’arrivée et sont visuellement distinguables dans le texte et les commandes.

Gardez les étiquettes des commandes littérales : « Charger la carte interactive », « Ouvrir l’itinéraire » et « Voir l’entrée accessible ». Évitez les étiquettes vagues telles que « Explorer », « Voir plus » ou « Cliquez ici ». Indiquez le fournisseur avant l’activation lorsqu’une connexion a des implications en matière de confidentialité.

Ne placez jamais de numéros de téléphone, d’horaires d’ouverture, d’allégations promotionnelles, d’avis, de prix, de formulaires de réservation ou de longues politiques de stationnement à l’intérieur du canevas interactif. Ces informations appartiennent au HTML et à leurs propres éléments typés. Ne publiez jamais de clé API, de position en direct d’un utilisateur, d’entrée résidentielle privée, d’épingles de bureau fabriquées, de zones de service non vérifiées ou de coordonnées copiées depuis un géocodeur non vérifié. La carte ne doit pas suggérer un accès visiteur là où il n’existe pas.

Vérifiez l’adresse et le marqueur lors de la publication, après un changement d’emplacement et lors de la révision planifiée. Les routes et les étiquettes du fournisseur peuvent changer indépendamment ; l’organisation reste responsable de l’exactitude de son enregistrement d’emplacement et de ses instructions d’arrivée.

Types de pages qui l’utilisent

Le champ postTypes du frontmatter est la source de cette matrice d’implémentation.

Liste de contrôle QA

• Le nom du lieu et l’adresse complète apparaissent sous forme de texte sélectionnable rendu par le serveur en dehors de la carte.
• Le marqueur pointe vers le point d’arrivée public vérifié plutôt que vers un code postal ou un centroïde de bâtiment.
• L’adresse, les coordonnées, l’identifiant du lieu, le lien d’itinéraire et les données structurées proviennent du même enregistrement faisant autorité.
• Le bloc explique toute unité, étage, entrée, règle de rendez-vous ou chemin d’accès nécessaire pour arriver.
• L’implémentation par défaut évite les requêtes tierces jusqu’à l’activation explicite ou le consentement valide.
• Une exception de chargement permanent a un objectif documenté, une base de confidentialité et un budget de performance mesuré.
• La largeur et le rapport hauteur/largeur sont réservés avant le chargement de l’image, de l’iframe ou du code du fournisseur.
• Tout chemin d’image statique pointe vers un élément approuvé réel et possède un texte alternatif utile.
• La commande de chargement est un bouton avec un nom accessible propre au lieu et un focus visible.
• L’iframe, lorsqu’elle est créée, a un titre descriptif unique et ne bloque pas le focus clavier.
• L’adresse, le lien d’itinéraire, la note d’arrivée et le chemin de nouvelle tentative restent utilisables lorsque les scripts, le consentement ou le fournisseur échouent.
• Les informations essentielles ne dépendent pas de la couleur des épingles, du survol, du glisser-déposer, du zoom ou des étiquettes de la carte.
• La mise en page fonctionne aux largeurs réduites et à 200 % de zoom sans recouvrir les commandes du fournisseur.
• La page ne revendique pas de bureau public, d’entrée ou de zone de service que l’organisation ne peut pas vérifier.
• Aucune clé API, jeton d’accès, position d’utilisateur, coordonnée privée ou URL d’iframe arbitraire n’apparaît dans le contenu rédigé.
• Les implémentations multi-emplacements conservent une liste textuelle accessible au clavier et synchronisent la succursale sélectionnée de manière atomique.
• Le schéma, s’il est présent, décrit la même entité réelle et la même adresse que celles montrées aux visiteurs.
• La date de vérification et le responsable de la révision respectent la politique de maintenance des données locales du site.

Un bloc de carte réussit lorsque perdre la carte change le confort, pas le sens. Le lecteur sait toujours où se trouve le lieu, comment s’y rendre et à quoi s’attendre ; le fournisseur reste facultatif.