Ce que vous pouvez brancher
Trois portes, de la plus simple à la plus profonde. Dans neuf projets sur dix, la première suffit.
Le script d'intégration
Un fichier JavaScript,
LaTraceMapIframe.js, et un appel àcreateLaTraceMapIframe. Il pose la carte dans le conteneur que vous désignez, gère la hauteur desktop et mobile, le plein écran sur téléphone, et laisse votre page tranquille. C'est ce que tournent Chartreuse Tourisme, l'Office de Tourisme Blois Chambord, Creuse Tourisme, VISITWallonia et Ouest-France.Les paramètres de la carte
customConfigIdchoisit la carte : la sélection d'itinéraires et de lieux, le thème, les filtres, tout ce que le client règle dans son back-office.modechoisit l'affichage : exploration, récit d'un itinéraire ou vue d'ensemble d'une itinérance.voyageouvre directement un itinéraire précis. On peut aussi présélectionner une difficulté ou une durée en jours.La liste des cartes d'un compte, en JSON
Une route renvoie toutes les cartes d'un compte et de ses sous-comptes, avec leur identifiant et le bloc HTML prêt à coller. Un CMS peut en faire un sélecteur de cartes. On vous en donne l'adresse au démarrage du projet.
Le SDK, pour aller plus loin
Pour pousser vos propres lieux sur la carte, géocoder une adresse ou produire une image statique de la carte, nous avons un SDK JavaScript et un SDK iOS. Il s'ouvre projet par projet, avec une clé propre à l'intégration, limitée à vos domaines et à vos cartes. Pas de portail en libre-service : on le cadre avec vous.
Le code, tel qu'il tourne
Voici le bloc complet pour la carte de Saint-Rémy-de-Blot affichée plus bas. C'est le même que celui que le back-office génère pour chaque carte, à l'identifiant près.
Intégrer une carte La Trace dans une page
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://app.latrace.com/assets/js/map/LaTraceMapIframe.js"></script>
<div id="map"></div>
<script>
const laTrace = LaTraceMapIframeIntegration();
laTrace.createLaTraceMapIframe('#map', {
clientAlias: 'puy-de-dome-tourisme',
customConfigId: 'c51c1bbc-2bb1-416e-85c5-1c7ec79f730e',
mode: 'explore',
height: '640px',
mobileHeight: '560px'
});
</script>
Pour ouvrir le récit d'un seul itinéraire, passez mode: 'story' et l'alias de l'itinéraire dans voyage. Pour une itinérance en plusieurs étapes, mode: 'overview'.
La balise viewport n'est pas décorative. Sans elle, Safari sur iPhone affiche la page comme sur un écran de 980 px de large, et tout devient minuscule. Mettez-la.
La carte, en vrai
Celle de Saint-Rémy-de-Blot, l'une des 826 cartes de Puy-de-Dôme Tourisme : 16 itinéraires et 22 lieux autour des gorges de la Sioule, du Pont de Menat au circuit cyclo des Combrailles. Une carte de commune, volontairement courte, calée sur son territoire. Ouvrez un itinéraire, lancez le récit, puis regardez le même rendu sur votre téléphone.
La carte de Saint-Rémy-de-Blot, randonnées et lieux des gorges de la Sioule, posée ici avec le bloc ci-dessus.
Ce que font les équipes techniques de nos clients
Chacun a branché la carte avec ses outils. Aucun n'a touché à une tuile.
Ouest-France
La carte des balades est posée par notre script dans la rubrique tourisme de ouest-france.fr, y compris au cœur d'articles de récit.
Voir la référencePuy-de-Dôme Tourisme
L'agence web du Département s'appuie sur la liste JSON des 826 cartes du compte pour les poser sur les sites des communes, un déploiement annoncé pour octobre 2026.
Voir la référenceOffice de Tourisme Blois Chambord
Sur bloischambord.com, la page vélo porte 29 itinéraires des Châteaux de la Loire à Vélo, la page randonnée en porte 128.
Voir la référenceChartreuse Tourisme
Une page /map/ pour la carte générale du massif, et la carte posée aussi sur les pages de ses tours et itinérances.
Voir la référenceVISITWallonia
Une carte dédiée aux itinéraires des Hautes Fagnes, intégrée dans la page de la destination sur visitwallonia.be.
Voir la référenceOceania Hotels
Trois modes sur les pages des hôtels : liste de boucles, itinérance en vue d'ensemble, exploration.
Voir la référence
Ce qui se passe derrière la carte
Vous posez un bloc. Le reste vit chez nous.
- 1
Les données arrivent seules
Apidae, Tourinsoft, Pivot ou des traces GPX : les itinéraires et les lieux se synchronisent depuis la source du client. Vous n'écrivez pas d'import.
- 2
Le client règle sa carte
Sélection, couleurs, police, filtres par activité : tout se fait dans son back-office, qui produit un nouvel identifiant de carte ou met à jour l'existant. Votre code ne change pas.
- 3
La carte se charge quand on la voit
Vous pouvez différer le chargement du script jusqu'à ce que le bloc approche de l'écran. Cette page le fait.
- 4
L'audience remonte au client
Sessions, itinéraires ouverts, traces GPX téléchargées : le client les lit dans son back-office, sans balise de mesure à ajouter de votre côté.
Pour aller plus loin
Les pages utiles avant d'écrire une ligne de code. Les autres guides sont dans l'index des guides.
Guide
Intégrer une carte interactive sur son site
Iframe, script ou page dédiée : ce que chaque méthode change pour le mobile et pour Google.
Solution
Apidae, Tourinsoft, Pivot, GPX : d'où viennent les itinéraires et les lieux de la carte.
Solution
Les mêmes données dans une application à la marque du client.
Solution
Ce que le visiteur fait sur la carte : lieux, itinéraires, séjours.
Solution
Ce qu'affiche
mode: 'story': l'itinéraire raconté lieu après lieu.Solution
Où le client règle sa carte, récupère son bloc d'intégration et lit son audience.
Guide
Cahier des charges d'une carte interactive
Les données, les droits, la reprise : à lire avant de répondre à une consultation.
Guide
Logiciels de carte interactive comparés
Les outils du marché, critère par critère.
FAQ
Existe-t-il une API pour afficher une carte d'itinéraires sur mon site ?
Oui, sous la forme d'un script JavaScript : vous chargez LaTraceMapIframe.js, vous appelez createLaTraceMapIframe avec l'alias du compte et l'identifiant de la carte, et la carte s'affiche dans votre conteneur. Pour pousser vos propres lieux ou géocoder, le SDK s'ouvre sur projet, avec une clé dédiée.
Faut-il une clé d'API pour intégrer la carte ?
Non, pas pour le script d'intégration : l'identifiant de carte suffit, et c'est le client qui décide dans son back-office ce que la carte montre. Une clé n'entre en jeu qu'avec le SDK, et elle est limitée à vos domaines et à vos cartes.
La carte fonctionne-t-elle dans WordPress ou un autre CMS ?
Oui, partout où l'on peut coller un bloc HTML avec un script. Pour un CMS qui gère beaucoup de cartes, la liste JSON des cartes du compte évite de recopier les identifiants à la main.
Comment ouvrir directement un itinéraire précis ?
Avec le paramètre voyage, qui prend l'alias de l'itinéraire, et mode: 'story' pour le récit ou mode: 'overview' pour la vue d'ensemble d'une itinérance. Sans voyage, mode: 'explore' affiche toute la carte.
Peut-on mettre plusieurs cartes sur la même page ?
Oui. Chaque appel à createLaTraceMapIframe vise son propre conteneur et garde son propre état. Donnez à chaque carte un iframeId distinct.
La carte est-elle responsive ?
Oui. Vous fixez height et width pour le desktop, mobileHeight et mobileWidth pour le téléphone. Sur mobile, un toucher sur la carte la passe en plein écran pour que le visiteur la manipule sans faire défiler la page.
Vous avez un site à brancher et une date de mise en ligne ?
Montrez-nous la page, le CMS et les données. On vous donne le bloc qui marche dessus, avec vos identifiants de carte.
Demander une démonstration