Ajouter la carte de l'École sur votre site

← Revenir à la carte de l'École

Vous aviez déjà posé la carte ? Recopiez le code à neuf

La carte se cadre maintenant toute seule sur les villes de l'École, au lieu d'afficher une portion d'Europe figée. Vous l'avez déjà, sans rien faire : l'adresse n'a pas changé, c'est ce qui se trouve derrière qui s'est amélioré.

Pour en profiter pleinement, remplacez votre code par celui de l'étape 1. Deux choses y ont changé : la hauteur passe de 500 à 680 — l'ancienne valeur laissait la carte un cran trop éloignée, avec beaucoup de mer autour du réseau — et une ligne style lui permet de se réduire d'elle-même sur les téléphones.

Rien n'est cassé si vous ne le faites pas : tout continue de fonctionner.

Ce que vous allez obtenir

Une carte interactive affichée directement sur une page de votre site, montrant toutes les villes de l'École Corps Vivant Corps Conscient (France, Belgique, Suisse). Chaque ville a une épingle ; en cliquant dessus, vos visiteurs voient le nom des enseignants et un lien vers leur site quand il existe.

Bonnes nouvelles avant de commencer :

• Cela prend environ 5 minutes.
• Il n'y a rien à installer, rien à télécharger, aucun compte à créer.
• C'est gratuit, et ça le restera.
• Vous ne pouvez rien casser : si ça ne marche pas du premier coup, vous supprimez ce que vous avez collé et tout redevient comme avant.
• Une fois posée, la carte se met à jour toute seule. Si une nouvelle ville ou un nouvel enseignant rejoint l'École, votre page l'affichera automatiquement, sans que vous ayez quoi que ce soit à refaire.

Un peu de vocabulaire (30 secondes)

Trois mots reviennent dans ce guide. Voici ce qu'ils veulent dire, en français courant.

Un « code d'intégration » — c'est un petit bout de texte, qui ressemble à du charabia, et qu'on colle dans sa page. Il ne s'affiche pas tel quel : votre site le comprend et le remplace par la carte. Un peu comme un code postal : ce n'est pas la ville, c'est ce qui permet d'y arriver.

Une « iframe » (prononcer « aïe-frame ») — c'est une fenêtre dans votre page, qui affiche le contenu d'un autre site. Ici, elle affichera ma carte à l'intérieur de votre page. Vos visiteurs ne quittent pas votre site.

Un « bloc HTML » — dans les outils comme WordPress ou Wix, c'est le type d'encadré dans lequel on a le droit de coller un code d'intégration. Selon l'outil, il s'appelle « HTML personnalisé », « Code », « Intégrer » ou « Embed ». C'est toujours la même chose.

Étape 1 — Copier le code

Voici le code. Sélectionnez-le en entier et copiez-le (Ctrl + C sur PC, Cmd + C sur Mac).

<iframe
  src="https://taichipourtous-rennes.fr/embed/carte-ecole-cvcc/"
  width="100%"
  height="680"
  style="border:0; width:100%; height:max(320px, min(80vh, 680px, 120vw));"
  loading="lazy"
  title="Carte de l'École Corps Vivant Corps Conscient">
</iframe>

Important : copiez-le tel quel, sans rien modifier pour l'instant, y compris les chevrons < et > du début et de la fin. On verra plus bas comment le personnaliser une fois qu'il fonctionne.

Astuce : sur la version en ligne de ce guide, le bouton Copier au coin du cadre fait le travail pour vous. Si vous lisez une version imprimée ou en PDF et que la copie colle les lignes entre elles, demandez le code par le formulaire de contact : il vous sera envoyé en texte simple.

Étape 2 — Coller le code dans votre site

Trouvez ci-dessous la section qui correspond à votre outil.

WordPress

1. Connectez-vous à votre site, et allez sur la page où vous voulez la carte.
2. Cliquez sur « Modifier » (ou « Modifier avec l'éditeur de blocs »).
3. Cliquez à l'endroit de la page où la carte doit apparaître.
4. Cliquez sur le bouton + (« Ajouter un bloc »).
5. Dans la zone de recherche qui s'ouvre, tapez HTML.
6. Choisissez le bloc nommé « HTML personnalisé ».
7. Un rectangle vide apparaît. Collez le code dedans (Ctrl + V / Cmd + V).
8. Cliquez sur « Mettre à jour » ou « Publier » en haut à droite.
9. Allez voir votre page en vrai (bouton « Voir la page »). La carte doit être là.

Vous avez l'ancien éditeur « Classique » ? (une grande zone de texte façon traitement de texte, sans blocs) : cliquez sur l'onglet « Texte » en haut à droite de la zone d'édition — surtout pas « Visuel » — collez le code, puis revenez sur « Visuel ». Publiez.

Attention : dans l'éditeur, le bloc peut rester gris ou afficher le code en clair. C'est normal. La carte n'apparaît vraiment que sur la page publiée. Regardez toujours le résultat final, pas l'aperçu de l'éditeur.

Wix

1. Ouvrez votre site dans l'éditeur Wix.
2. Allez sur la page voulue.
3. Dans la barre à gauche, cliquez sur le bouton + (« Ajouter des éléments »).
4. Cherchez la catégorie « Intégrer le code » (ou « Embed »).
5. Choisissez « Intégrer du HTML » (parfois appelé « Code HTML » ou « HTML iframe »).
6. Un cadre apparaît sur votre page, avec un bouton « Saisir le code » : cliquez dessus.
7. Une petite fenêtre s'ouvre avec deux choix : « Code » et « Site web ». Choisissez « Code ».
8. Collez le code dans la zone de texte, puis cliquez sur « Appliquer ».
9. Le cadre sur votre page est probablement trop petit : attrapez ses coins et agrandissez-le à la taille souhaitée.
10. Cliquez sur « Publier » en haut à droite.

Le plus fréquent sur Wix : on oublie d'agrandir le cadre, et la carte se retrouve écrasée dans un petit rectangle. Le cadre Wix et la carte sont deux choses différentes — c'est le cadre qui commande.

Simplébo

1. Ouvrez l'éditeur de la page voulue.
2. Cherchez, dans la liste des blocs disponibles, un bloc appelé « Widget HTML », « Code personnalisé » ou « Code libre ».
3. Ajoutez ce bloc à l'endroit voulu.
4. Collez le code à l'intérieur.
5. Enregistrez et publiez.

Si vous ne trouvez pas ce type de bloc, contactez le support Simplébo et dites-leur : « je souhaite insérer un code d'intégration iframe sur une de mes pages ». C'est une demande très courante, ils sauront vous indiquer où.

Squarespace, Jimdo, Webflow, ou un autre outil

Le principe est toujours identique :

1. Modifiez la page voulue.
2. Cherchez un bloc appelé « HTML », « Code », « Intégration » ou « Embed ».
3. Collez le code à l'intérieur.
4. Publiez.

Si votre outil vous demande une simple adresse internet (une URL) au lieu d'un code, donnez-lui uniquement ceci :

https://taichipourtous-rennes.fr/embed/carte-ecole-cvcc/

Site fait « à la main » (fichiers HTML / CSS / JS)

Collez le code directement dans votre fichier .html, à l'endroit voulu de la page. Rien à ajouter dans le <head>, aucun script, aucune bibliothèque à charger :

<section class="carte-ecole">
  <h2>Les enseignants de l'École</h2>
  <iframe
    src="https://taichipourtous-rennes.fr/embed/carte-ecole-cvcc/"
    width="100%"
    height="680"
    style="border:0; width:100%; height:max(320px, min(80vh, 680px, 120vw));"
    loading="lazy"
    title="Carte de l'École Corps Vivant Corps Conscient">
  </iframe>
</section>

Si vous préférez une hauteur proportionnelle à la largeur plutôt qu'un nombre de pixels fixe (utile en responsive), sans aucun JavaScript :

<div style="aspect-ratio: 4 / 3; min-height: 580px; max-height: 680px;">
  <iframe
    src="https://taichipourtous-rennes.fr/embed/carte-ecole-cvcc/"
    style="width:100%; height:100%; border:0;"
    loading="lazy"
    title="Carte de l'École Corps Vivant Corps Conscient">
  </iframe>
</div>

Étape 3 — Vérifier que tout va bien

Ouvrez votre page publiée (pas l'éditeur) et contrôlez ces quatre points :

1. La carte s'affiche, avec le fond de plan (les routes, les villes, les noms de région).
2. Des épingles sont visibles sur la France, la Belgique et la Suisse.
3. En cliquant sur une épingle, une petite bulle s'ouvre avec le nom de la ville et des enseignants.
4. Les boutons + et − en haut à gauche de la carte permettent de zoomer.

Si ces quatre points sont bons, c'est terminé. Vous n'avez plus jamais à y toucher.

Pensez aussi à regarder votre page sur un téléphone. La carte s'adapte automatiquement, mais c'est l'occasion de vérifier que la hauteur choisie vous convient sur petit écran.

Personnaliser (facultatif)

Ces réglages sont optionnels. Si la carte vous convient telle quelle, ignorez cette partie.

Changer la hauteur

Dans le code, repérez la ligne :

  style="border:0; width:100%; height:max(320px, min(80vh, 680px, 120vw));"

Dans la plupart des cas, ne la changez pas. Cette ligne règle la hauteur toute seule, selon l'écran du visiteur : 680 pixels au plus sur un ordinateur, moins sur un portable, et nettement moins sur un téléphone pour ne pas occuper tout l'écran. Elle n'y descend jamais sous 320 pixels.

Si votre outil refuse les lignes style — certains constructeurs de sites les effacent —, le height="680" juste au-dessus prend le relais. La carte reste correcte, simplement figée à 680 pixels sur tous les écrans.

Pourquoi 680 comme maximum, et pas davantage ? Parce que la carte choisit son niveau de zoom par paliers entiers, selon la place que vous lui donnez. Entre deux paliers, les pixels ajoutés ne rapprochent rien : ils deviennent de la bordure vide autour des villes.

Ne touchez pas au width="100%" : c'est lui qui fait que la carte occupe toute la largeur disponible. Sachez simplement que sur une colonne étroite — moins de 485 pixels de large, ce qui arrive sur téléphone ou dans une barre latérale — c'est la largeur qui limite le zoom, et la carte s'éloigne quelle que soit la hauteur. C'est normal, et ça se corrige tout seul dès que l'écran est plus large.

Changer la couleur des épingles

Par défaut les épingles sont grises, volontairement : une couleur neutre qui n'impose pas les couleurs de mon site sur le vôtre.

Pour les accorder à votre charte graphique, ajoutez ?color= suivi du code de la couleur sans le dièse #, juste après carte/ dans l'adresse.

Exemple pour du bleu (#1a73e8) :

<iframe
  src="https://taichipourtous-rennes.fr/embed/carte-ecole-cvcc/?color=1a73e8"
  width="100%"
  height="680"
  style="border:0; width:100%; height:max(320px, min(80vh, 680px, 120vw));"
  loading="lazy"
  title="Carte de l'École Corps Vivant Corps Conscient">
</iframe>

Où trouver votre code couleur ? Il fait 6 caractères (chiffres et lettres de A à F), et s'écrit habituellement avec un # devant, par exemple #8B0000. On le trouve dans les réglages de thème de votre site, ou en demandant à la personne qui l'a créé. Retirez bien le # en le recopiant dans l'adresse : ?color=8B0000, et non ?color=#8B0000.

Si ça ne marche pas

Le cadre est vide, tout blanc

Vérifiez l'adresse dans le code : elle doit commencer par https:// et se terminer par une barre oblique / après carte. Une adresse incomplète donne un cadre vide.

Je vois le code écrit en toutes lettres sur ma page

Le code a été collé dans une zone de texte normale au lieu d'un bloc HTML. Supprimez-le, et reprenez l'étape 2 en veillant à bien choisir un bloc de type HTML / Code / Intégration.

Rien ne s'affiche, alors que j'ai bien suivi les étapes

Certaines formules d'hébergement gratuites (Wix gratuit, WordPress.com gratuit, etc.) interdisent les blocs HTML personnalisés. C'est une limitation commerciale de l'hébergeur, pas une erreur de votre part. Deux solutions : passer à une formule payante, ou simplement mettre un lien vers la carte au lieu de l'intégrer :

<a href="https://taichipourtous-rennes.fr/embed/carte-ecole-cvcc/" target="_blank">
  Voir la carte des enseignants de l'École
</a>

La carte est coupée en bas

Ce n'est pas la carte qui déborde, c'est le bloc de votre page qui est plus court qu'elle. Cherchez la hauteur de la section qui contient le code et donnez-lui au moins 680 pixels — sur Wix et Squarespace, le cadre se redimensionne à la souris, en tirant sa poignée du bas. Ne rabaissez pas la hauteur de la carte pour compenser : vous perdriez un palier de zoom, et elle s'éloignerait d'un coup.

Un message d'erreur de sécurité, ou « refuse de se connecter »

Prévenez-moi. C'est un réglage sur mon serveur, pas chez vous, et je le corrige.

La carte s'affiche mais reste grise, sans fond de plan

Rechargez la page en forçant l'actualisation : Ctrl + Shift + R (PC) ou Cmd + Shift + R (Mac). Si le problème persiste, prévenez-moi en me disant quel navigateur vous utilisez (Firefox, Chrome, Safari…).

Questions fréquentes

Est-ce que ça ralentit mon site ? Très peu. La carte ne se charge que lorsque le visiteur fait défiler la page jusqu'à elle (c'est le rôle du loading="lazy" dans le code).

Est-ce que je dois mettre à jour quelque chose de temps en temps ? Non, jamais. La carte est hébergée chez moi ; toute mise à jour du réseau apparaît automatiquement chez vous.

Est-ce que ça collecte des données sur mes visiteurs ? Il n'y a aucun cookie, aucun traceur publicitaire, aucun profilage. En revanche, le fond de plan est fourni par OpenStreetMap : afficher la carte déclenche une requête vers leurs serveurs, et cette requête transmet l'adresse IP de votre visiteur. C'est le cas de toute carte intégrée, quel que soit le fournisseur.

Ce point doit donc être mentionné dans vos mentions légales. Ajoutez-y ce paragraphe (adaptez le nom de la page entre parenthèses à la vôtre) :

La carte interactive de l'École Corps Vivant Corps Conscient (page Nom de votre page) charge des tuiles cartographiques auprès d'OpenStreetMap (fondation OpenStreetMap, Royaume-Uni). Cette requête transmet votre adresse IP à leurs serveurs — voir leur politique de confidentialité : https://wiki.osmfoundation.org/wiki/Privacy_Policy

C'est le texte exact utilisé sur mon propre site, vous pouvez le reprendre tel quel.

Puis-je mettre la carte sur plusieurs pages ? Oui, autant que vous voulez, avec le même code.

Et si je change d'avis ? Supprimez le bloc, publiez. Il n'en reste aucune trace.

Besoin d'aide ?

Passez par le formulaire de contact, en précisant quel outil vous utilisez (WordPress, Wix…) et l'adresse de la page concernée. Si possible, joignez une capture d'écran de ce que vous voyez — c'est souvent ce qui permet de répondre le plus vite.