Comment intégrer une carte interactive sur votre site web ?

Exemple embarqué : la carte du Parc naturel régional de Chartreuse

Plutôt qu'une maquette, une carte réelle, en production, posée sur cette page par script, la méthode décrite plus bas. C'est celle du Parc naturel régional de Chartreuse : itinérances, boucles, hébergements et sites, alimentés par le système d'information touristique du territoire. Ouvrez une fiche, changez de filtre, passez en plein écran. Ce que vous voyez est ce que voit un visiteur du site du Parc, ni plus ni moins.

La carte

Carte interactive du Parc naturel régional de Chartreuse, intégrée par script. Les fiches, les traces et les fichiers GPX sont ceux servis sur le site du Parc.

Ce que cette carte produit, mesuré

Chaque carte La Trace mesure ses sessions, ses fiches ouvertes et ses téléchargements. Sur cette carte, entre le 18 mai et le 16 septembre 2026 :

• 6 702 sessions, d'une durée moyenne de 10 minutes 39 au premier plan (le temps passé dans un autre onglet n'est pas compté).
• 57,9 % des sessions ont ouvert au moins une fiche.
• 8 773 fiches de lieux et 1 002 fiches d'itinéraires ouvertes, 209 fichiers GPX téléchargés.

Ces chiffres ne sont pas une promesse pour votre territoire : ils dépendent de la saison, du trafic de votre site et de la richesse de vos fiches. Ils montrent en revanche à quoi ressemble une carte qui fonctionne, et ce qu'un tableau de bord doit vous rendre pour que vous puissiez le savoir.

Comment intégrer une carte sur WordPress, Wix, Webflow ou avec Google Maps ?

Une carte intégrable se livre toujours de la même façon : une balise iframe ou un bloc de script, à coller dans un élément de votre éditeur qui accepte du code. La carte du Parc de Chartreuse, juste au-dessus, est posée ainsi dans l'élément de code de Webflow. Voici le geste pour chaque outil, et l'endroit où ça coince.

Sur WordPress

Dans l'éditeur de blocs, ajoutez un bloc « HTML personnalisé », collez le code, puis prévisualisez sur mobile. Aucune extension n'est nécessaire. Si votre thème filtre le JavaScript, l'iframe passera toujours. Sur un site multisite ou géré par une agence, demandez que le bloc soit autorisé pour votre rôle : c'est la friction la plus fréquente.

Un cas à part : WordPress.com, la version hébergée. Tant que le site n'a pas un plan payant avec les fonctions d'hébergement activées, les balises iframe et script sont retirées à l'enregistrement. Le code disparaît sans message d'erreur, et c'est souvent là qu'on perd une matinée.

Sur Wix

Dans l'éditeur, ouvrez le panneau d'ajout d'éléments, rubrique Embed Code, puis choisissez Embed HTML pour un script, ou Embed a site pour l'adresse d'une carte. Wix place ce code dans un cadre de taille fixe : donnez-lui une vraie hauteur, 600 pixels au moins, puis passez dans l'éditeur mobile, que Wix gère à part, pour la régler une seconde fois. Le code doit être servi en HTTPS.

Sur Webflow

Glissez un élément Code Embed à l'endroit voulu et collez le code. Le Designer n'exécute pas les scripts : la carte n'apparaît que sur la page publiée, jugez-la là. C'est la méthode de cette page.

Avec Google Maps

Pour montrer une adresse, Google Maps suffit et ne coûte rien : cherchez le lieu, ouvrez Partager, puis Intégrer une carte, copiez le HTML et collez l'iframe avec l'une des méthodes ci-dessus. Deux limites. La carte montre un lieu ou un trajet, pas votre sélection de lieux. Et elle charge les services de Google dès l'affichage, donc elle passe derrière votre bandeau de consentement.

Ce que Google Maps dépose exactement, et comment l'afficher sans bandeau : notre guide Google Maps et le RGPD.

Créer la carte vous-même : My Maps, uMap

Pour placer vos propres points, Google My Maps et uMap, construit sur OpenStreetMap, se remplissent à la main et donnent eux aussi un code à intégrer. C'est gratuit, et ça suffit pour une vingtaine de lieux qui bougent peu. Au-delà, la carte vieillit au rythme du tableur qui l'alimente. C'est tout l'objet de la section suivante.

Ce que vous voulez afficher, et ce que ça implique

Avant de choisir une technique, il faut nommer ce que vous voulez montrer. La carte qui situe l'office et le parking n'a rien à voir avec celle qui présente quarante boucles de randonnée et trois cents hébergements. La première se règle en cinq minutes. La seconde est un catalogue, et un catalogue se maintient.

Quelques points fixes

Une adresse, un parking, un point de départ : le besoin est de localiser. N'importe quel outil fait l'affaire, y compris une image statique avec un lien vers un service d'itinéraire. Une carte interactive apporte peu ici, et coûte du poids de page pour rien. Si c'est votre seul besoin, ce guide vous fera gagner du temps : prenez la solution la plus légère, et passez à autre chose.

Des lieux, avec des fiches

Dès qu'un point porte une fiche (une photo, des horaires, un tarif, un téléphone, un lien de réservation), la carte devient un catalogue. Trois questions se posent alors, et elles conditionnent tout le reste : d'où vient la donnée, qui la met à jour, et où s'ouvre la fiche. Une carte alimentée à la main depuis un tableur est à jour le jour de sa mise en ligne, puis elle vieillit. Une carte connectée à votre système d'information touristique (Apidae, Tourinsoft, Decibelles Data, Ingénie) suit les modifications de vos prestataires sans que personne n'y touche. Pour juger les outils sur ces trois questions, notre comparatif des logiciels de carte interactive en met six côte à côte.

Des itinéraires

Un itinéraire n'est pas un point. Il porte une trace, un profil altimétrique, une distance, un dénivelé, une difficulté, des étapes, un fichier GPX à télécharger, et des lieux le long du parcours. Le rendu d'une trace sur un fond de carte est la partie facile ; la partie difficile est tout ce qui doit venir avec, et c'est ce qui fait qu'un visiteur reste dix minutes ou dix secondes. C'est aussi là que se joue la valeur pour vous : un itinéraire consulté avec ses hébergements et ses restaurants est un itinéraire qui produit des nuitées.

Ce que ça implique pour le choix de la méthode

• Quelques points fixes : une iframe d'un service gratuit suffit, ou même une image.
• Des lieux avec des fiches : il vous faut une source de données et une mise à jour automatique, donc une solution connectée à votre SIT ou à votre base. L'iframe ou le script sont alors deux façons d'afficher la même carte.
• Des itinéraires : la carte doit savoir lire des traces, calculer des profils, servir des GPX et relier des lieux à un parcours. Le script ou la page dédiée deviennent préférables, parce que la carte a besoin de place et d'une adresse propre.

Les trois façons d'intégrer une carte : iframe, script, page dédiée

Les trois méthodes affichent une carte dans votre site. Elles diffèrent par ce que votre page contrôle, par ce que Google en voit, et par ce qui se passe le jour où vous changez de CMS.

1. L'iframe : une fenêtre sur une autre page

L'iframe est une balise HTML qui ouvre, dans votre page, une autre page hébergée ailleurs. C'est la méthode la plus simple et la plus robuste : elle passe dans tous les CMS, y compris ceux qui refusent le JavaScript dans les blocs de contenu (Wix, bien des réglages WordPress, la plupart des sites de collectivités). Elle isole la carte : votre CSS n'entre pas dedans. Il peut en revanche la serrer de l'extérieur, et c'est le piège classique. Sur le site d'un média national, cet été, l'éditeur d'articles plafonnait toute iframe à 672 pixels de large dans une colonne qui en faisait 930 : la rédaction voyait une carte « pas assez zoomée », alors qu'une seule ligne de CSS de leur thème comprimait la fenêtre. Avant de chercher un bug de cadrage, mesurez le conteneur et l'iframe : neuf fois sur dix, l'écart est là.

Sa limite est la fenêtre elle-même. La taille est fixée par votre balise, pas par le contenu. Le plein écran, la géolocalisation ou le partage d'une fiche demandent des attributs explicites (allow et allowfullscreen). Et le contenu de la carte appartient à l'autre page, pas à la vôtre : nous y revenons dans la partie sur Google.

Exemple d'iframe

<iframe
  src="https://app.latrace.com/client/chartreuse/explore?customConfigId=9328d965-5fba-4ad7-af19-e9fa1a6bf2dd&noGtm=true"
  title="Carte interactive du Parc naturel régional de Chartreuse"
  width="100%" height="640"
  loading="lazy"
  allow="geolocation; fullscreen" allowfullscreen
  style="border:0;border-radius:16px">
</iframe>

Deux détails comptent dans cet exemple : l'attribut loading="lazy", qui repousse le chargement de la carte tant qu'elle n'est pas visible à l'écran, et l'attribut title, exigé par les règles d'accessibilité pour décrire le contenu de la fenêtre.

2. Le script : la carte construite dans votre page

Avec un script, vous placez un conteneur vide dans votre page et un petit programme JavaScript y construit la carte. Techniquement, le script crée souvent une iframe lui-même, mais il le fait en connaissant votre page : il adapte la hauteur à l'écran, applique une hauteur différente sur mobile, ouvre le plein écran proprement, et peut recevoir des consignes de votre site (afficher tel itinéraire, centrer sur telle zone, masquer telle section).

C'est la méthode qu'on recommande dès que la carte est le sujet de la page, parce que le mobile est l'endroit où une iframe nue échoue le plus souvent : une fenêtre de 640 pixels de haut sur un écran de 667, sans plein écran, personne ne s'en sert. Le script suppose que votre CMS accepte un bloc HTML, ce qui est le cas de WordPress, Webflow, Drupal, Joomla, Hugo et de la plupart des solutions des offices. Un piège à connaître pour juger un script : sur iPhone, Safari annonce une largeur de 980 pixels tant que la page hôte n'a pas appliqué sa balise viewport. Un script qui ne regarde que la largeur de fenêtre prend alors un téléphone pour un ordinateur. Le nôtre croise la largeur de fenêtre, la taille physique de l'écran et le type de pointeur ; demandez à n'importe quel fournisseur comment le sien décide qu'il est sur mobile.

Exemple de script

<script src="https://app.latrace.com/assets/js/map/LaTraceMapIframe.js"></script>
<div id="carte"></div>
<script>
  const laTrace = LaTraceMapIframeIntegration();
  laTrace.createLaTraceMapIframe('#carte', {
    envUrl: 'https://app.latrace.com',
    clientAlias: 'chartreuse',
    customConfigId: '9328d965-5fba-4ad7-af19-e9fa1a6bf2dd',
    mode: 'explore',
    width: '100%',
    height: '640px',
    mobileWidth: '100%',
    mobileHeight: '520px'
  });
</script>

Le conteneur peut être placé n'importe où dans la page, et un seul paramètre change d'une carte à l'autre. La hauteur mobile est déclarée à part : c'est le réglage qu'une iframe seule ne permet pas.

3. La page dédiée : la carte devient une adresse

La troisième méthode ne cherche pas à insérer la carte dans une page existante : elle lui donne une page à elle, en général sur un sous-domaine (carte.votre-destination.fr) ou un chemin de votre site. La carte occupe tout l'écran, elle a une adresse stable que l'on peut partager, imprimer sur un panneau de départ ou mettre dans un QR code, et chaque itinéraire ou chaque lieu peut avoir sa propre adresse.

Pour un catalogue d'itinéraires, c'est la méthode qui sert le mieux le référencement : chaque fiche est une page, avec un titre, une description et une image, indexable par Google et partageable sur les réseaux sociaux. Elle demande en revanche une décision d'architecture (le sous-domaine, la navigation de retour vers le site, le design partagé) et, pour un rendu totalement intégré, un kit de développement plutôt qu'un simple bloc à coller. La Trace fournit ce kit sous la forme d'un paquet @la-trace/map-sdk pour les équipes qui ont un développeur, et une page dédiée hébergée pour celles qui n'en ont pas.

Ce que chaque méthode vous laisse contrôler

Aucune méthode n'est mauvaise. L'iframe est le bon défaut pour une carte secondaire dans une page riche en texte ; le script pour une page dont la carte est le sujet ; la page dédiée pour un catalogue. Beaucoup de destinations combinent les trois : une page dédiée pour le catalogue, un script sur la page « Randonnée », une iframe dans chaque article de blog.

Questions fréquentes

Iframe ou script : lequel choisir ?

L'iframe quand la carte est un complément dans une page de texte et que vous voulez la solution la plus simple. Le script quand la carte est le sujet de la page, parce qu'il gère la hauteur mobile, le plein écran et les consignes envoyées par votre site. Les deux affichent la même carte ; le script sait mieux s'adapter à la page qui l'accueille.

Une carte interactive est-elle indexée par Google ?

Le contenu affiché dans une iframe n'est pas garanti d'être rattaché à votre page : Google le dit lui-même. Ce qui est indexé de façon certaine, c'est le texte HTML de votre page. Écrivez donc les noms, descriptions et chiffres de vos itinéraires dans la page, autour de la carte. Pour indexer un catalogue fiche par fiche, il faut une page par fiche, rendue côté serveur.

Peut-on créer une carte interactive gratuitement ?

Oui, avec Google My Maps ou uMap, pour quelques points saisis à la main. Le gratuit s'arrête là où commencent les fiches à jour, les traces avec profil, le GPX et la mesure d'audience. Les bibliothèques cartographiques ont aussi un palier gratuit généreux (10 000 chargements chez Google, 50 000 chez Mapbox), mais elles livrent une carte vide : le coût est dans le développement.

Une carte intégrée est-elle conforme au RGPD ?

Cela dépend de ce qu'elle charge. Si elle dépose des traceurs non nécessaires avant le consentement, non. Demandez à votre fournisseur la liste des domaines contactés par la carte et des données envoyées, et bloquez le chargement derrière votre bandeau si cette liste contient des outils publicitaires ou de mesure tiers. Une carte qui ne dépose aucun traceur et dont la mesure est agrégée peut se charger sans bandeau.

Combien de temps faut-il pour mettre une carte en ligne ?

L'intégration elle-même prend entre cinq minutes (iframe) et une demi-journée (page dédiée). Le délai réel vient du contenu : brancher un SIT, choisir les itinéraires, vérifier les traces, relire les fiches. Avec une source de données déjà propre, une carte de territoire se met en ligne en quelques jours ; sans source, le temps de saisie domine tout le reste.

Ce que ça donne sur mobile, pour Google, et pour le RGPD

Une carte se juge rarement sur l'écran où on l'a installée. Elle se juge sur le téléphone d'un visiteur en 4G, dans les résultats de Google, et dans le registre des traitements de votre collectivité. Quatre points à vérifier avant la mise en ligne, quelle que soit la solution retenue.

Le rendu mobile

La carte de Chartreuse intégrée par script, sur un iPhone : hauteur réduite et bouton plein écran.

Plus de la moitié des visites d'un site de destination se font sur téléphone, et c'est là qu'on voit les cartes échouer. Trois défauts reviennent sur les sites qu'on audite avant une intégration : une hauteur fixe qui coince la carte entre deux blocs de texte, un geste de pincement qui zoome la page hôte au lieu de la carte, et pas de plein écran. Testez sur un vrai téléphone, pas dans le mode « responsive » du navigateur, et vérifiez trois choses : la carte prend l'écran quand on la touche, un bouton plein écran existe, et les fiches se lisent sans zoomer.

Le poids de la page et les Core Web Vitals

Google mesure trois signaux d'expérience sur chaque page : le temps d'affichage du plus grand élément visible (LCP, à tenir sous 2,5 secondes), la réactivité aux interactions (INP, sous 200 millisecondes) et la stabilité visuelle (CLS, sous 0,1). Une carte interactive charge une bibliothèque, un fond de carte et des données, et sans précaution elle dégrade les trois. La bonne question à poser à un fournisseur n'est pas « combien pèse la carte » mais « quand se charge-t-elle » : une carte qui démarre après le texte et hors du chemin critique ne coûte rien à vos signaux. D'où les trois règles ci-dessous, qui valent pour n'importe quelle carte.

• Ne mettez pas la carte en premier élément de la page. Un titre et un paragraphe avant elle donnent à Google un plus grand élément visible qui s'affiche vite, et au lecteur une raison de rester.
• Chargez-la quand elle devient visible. L'attribut loading="lazy" sur une iframe, ou un chargement différé dans le script, retire la carte du chemin critique. Il est pris en charge nativement par Chrome, Firefox et Safari.
• Réservez sa hauteur. Une carte qui apparaît après le texte et le pousse vers le bas fait un saut de mise en page, mesuré par le CLS. Déclarez la hauteur du conteneur avant le chargement.

L'indexation par Google

Lors de ses heures de questions de décembre 2023, l'équipe Google Search a été claire : ses systèmes « essaient » d'associer le contenu d'une iframe à la page qui la contient, mais « ce n'est pas garanti », parce que les deux pages restent des pages à part entière. Vos quarante itinéraires affichés dans une iframe peuvent donc n'apporter aucun texte indexable à votre page. Ce que vos pages gagnent dans Google, elles le gagnent avec leur propre texte, et une carte, quelle qu'elle soit, ne remplace pas ce texte.

Les conséquences pratiques sont simples. Le texte qui doit se positionner (le nom des itinéraires, les descriptions, les villages traversés) doit exister dans votre page, en HTML, autour de la carte, et pas seulement dedans. Si le catalogue lui-même doit se positionner, une fiche par itinéraire, la page dédiée rendue côté serveur est la seule des trois méthodes qui le fait sans dépendre de la bonne volonté de Google. Et dans tous les cas, la carte ne remplace pas la page : elle l'illustre.

Le RGPD et les traceurs

Intégrer une carte, c'est faire appel à un tiers depuis le navigateur de votre visiteur. Ce tiers reçoit au minimum son adresse IP, et selon la solution, il dépose des traceurs. Les règles de la CNIL sont sans ambiguïté : aucun traceur non nécessaire au service ne peut être déposé avant que l'internaute ait consenti, et refuser doit être aussi simple qu'accepter. Une carte Google Maps intégrée par iframe dépose des cookies dès l'affichage de la page ; si votre bandeau de consentement ne la bloque pas, votre site est en infraction avant même que le visiteur ait cliqué. La solution usuelle consiste à afficher l'adresse en clair et un bouton « Afficher la carte », et à ne charger l'iframe qu'après le clic. Ce que la CNIL attend d'une carte Google, point par point, est dans notre guide Google Maps et RGPD.

L'accessibilité

Pour un site public, l'obligation d'accessibilité s'applique. La directive européenne 2016/2102 exclut les cartes en ligne de son champ, à une condition : pour les cartes destinées à s'orienter, l'information essentielle doit être fournie sous une forme numérique accessible. Concrètement, la liste des itinéraires avec leur distance, leur point de départ et leur difficulté doit exister en texte dans la page, lisible par un lecteur d'écran, et l'iframe doit porter un attribut title. La carte elle-même n'a pas à être conforme, la page qui l'héberge, si.

Combien ça coûte, selon la solution

Le prix affiché d'une carte est rarement son coût. Il y a ce que facture le fournisseur, ce que coûte le développement, et ce que coûte la mise à jour du contenu pendant les trois ans où la carte restera en ligne. Le tableau ci-dessous donne les grilles publiques telles que consultées le 16 septembre 2026 ; les fournisseurs les modifient sans préavis, vérifiez la page tarifaire avant de signer.

Pour un budget complet, poste par poste, voir notre guide combien coûte une carte interactive. Ici, on s'en tient aux grilles publiques des fournisseurs.

Les trois coûts qui n'apparaissent sur aucune grille

• La mise à jour. Une carte de 300 lieux saisis à la main demande, à raison d'une modification par lieu et par an, quelques jours de travail annuels. Une carte connectée au SIT n'en demande aucun. Sur trois ans, c'est souvent le premier poste.
• Le développement. Avec une bibliothèque cartographique, la carte vide est gratuite et le reste ne l'est pas : fiches, filtres, traces, profils, GPX, plein écran mobile, consentement. Comptez en jours de développeur, pas en dollars d'API.
• Le changement de site. Un site de destination est refait tous les quatre à six ans. Une carte qui vit dans le thème de l'ancien site disparaît avec lui ; une carte intégrée par bloc se recolle en dix minutes.

Sources

Toutes les pages ci-dessous ont été consultées le 16 septembre 2026. Les grilles tarifaires changent ; en cas d'écart, la page du fournisseur fait foi.

• Google Maps Platform, grille tarifaire : 10 000 événements gratuits par mois pour les cartes dynamiques, puis 7 $ les 1 000 ; Embed API sans limite.
• Mapbox, grille tarifaire : 50 000 chargements gratuits par mois, puis 5 $ les 1 000 ; définition du chargement de carte.
• MapTiler Cloud, grille tarifaire : 100 000 requêtes gratuites par mois, Flex à 30 $ par mois.
• Google My Maps, importer des données : limite de 2 000 lignes par calque, 10 calques par carte.
• uMap, instance OpenStreetMap France.
• Google Search Central, heures de questions de décembre 2023 : association du contenu d'une iframe à la page hôte, « pas garantie ».
• web.dev, Core Web Vitals : seuils LCP 2,5 s, INP 200 ms, CLS 0,1.
• CNIL, cookies et autres traceurs : les règles à respecter : consentement préalable, refus aussi simple que l'acceptation.
• Directive (UE) 2016/2102 relative à l'accessibilité des sites internet des organismes du secteur public, article 1, paragraphe 4, point d : exclusion des cartes en ligne sous condition.
• Durées de session et taux d'interaction : mesure interne La Trace sur la base de production, cartes clientes, 10 avril au 8 septembre 2026, et carte du Parc de Chartreuse du 18 mai au 16 septembre 2026. Sessions au premier plan uniquement, agrégées par jour.

Pour aller plus loin

• Nos solutions cartographiques

  Ce que La Trace propose aux destinations et aux entreprises.

• La carte d'un itinéraire et de ses lieux

  Mettre en avant un parcours avec ses étapes, ses services et son GPX.

• La carte de tous vos itinéraires

  Regrouper un catalogue multimodal sur une seule carte.

• Nous écrire

  Une question sur votre intégration ou votre SIT.

• Livret d'accueil : le guide complet

  Le guide pivot du cluster : le contenu, les formats et le modèle à remplir.

• Livret d'accueil Airbnb

  La version courte, adaptée aux contraintes de l'annonce et du chat.

• Livret d'accueil de gîte

  Ce qu'il faut y mettre pour un gîte ou une chambre d'hôtes.

• Combien coûte une carte interactive

  Les montants réellement notifiés dans les marchés publics.

• Cahier des charges d'une carte interactive

  Ce qu'il faut écrire pour recevoir des offres comparables.

• Quel outil choisir pour sa carte interactive

  Google My Maps, uMap, Canva, Datawrapper, Genially et La Trace, sur un même cas.

• La carte interactive d'un événement

  Journées du patrimoine, festival, trail : une carte qui vit un week-end.