Intégrer une carte sur votre site WordPress
Niveau : Débutant
Objectifs pédagogiques
À l’issue de cette astuce, vous saurez :
- Comprendre l’intérêt d’une carte pour le SEO local et l’expérience utilisateur.
- Choisir entre Google Maps et les alternatives RGPD-friendly selon votre situation.
- Intégrer une carte dans WordPress via un plugin ou un embed.
Pourquoi intégrer une carte sur votre site ?
Afficher une carte sur votre page de contact ou dans votre pied de page apporte plusieurs avantages concrets :
- SEO local : une carte associée à votre adresse renforce les signaux de géolocalisation que Google utilise pour le référencement local. Elle améliore votre visibilité dans les recherches “près de moi”.
- Expérience utilisateur : le visiteur visualise immédiatement où vous vous trouvez et peut calculer son itinéraire sans quitter votre site.
- Crédibilité : une adresse physique affichée avec une carte rassure les visiteurs sur la réalité de votre activité.
Le problème RGPD avec Google Maps
Google Maps est la solution la plus connue et la plus riche — mais elle pose un problème légal important. Dès que la carte se charge, Google dépose des cookies tiers et transfère des données vers ses serveurs américains. Or, la Cour de Justice de l’Union Européenne a invalidé le mécanisme qui encadrait ces transferts.
Concrètement : intégrer Google Maps sans bandeau de consentement place votre site en infraction avec le RGPD. La CNIL peut sanctionner cette pratique.
Si vous souhaitez utiliser Google Maps malgré tout, vous devez impérativement bloquer son chargement jusqu’à l’acceptation explicite des cookies par le visiteur — via un plugin de gestion du consentement comme Complianz ou Borlabs Cookie.
Les alternatives gratuites et RGPD-friendly
OpenStreetMap (OSM) est la solution recommandée pour la grande majorité des sites. Ses données sont libres et maintenues par une communauté mondiale. Elle ne dépose aucun cookie tiers et ne transfère aucune donnée hors UE — aucun consentement n’est requis. Sur WordPress, elle s’intègre en quelques clics via des plugins dédiés.
Géoportail IGN est la solution française par excellence — données souveraines, RGPD irréprochable. Particulièrement adapté aux sites institutionnels, collectivités ou projets nécessitant des données officielles (cadastre, relief, photographies aériennes IGN). L’intégration se fait via un iframe ou l’API Géoportail.
Leaflet.js est une bibliothèque JavaScript légère et open source qui s’appuie sur les tuiles OpenStreetMap. Elle offre plus de personnalisation que les plugins clé en main mais nécessite un peu de code ou un plugin dédié.
Méthode 1 — Intégrer OpenStreetMap via le plugin OSM by MiKa (recommandé)
Le plugin OSM – OpenStreetMap (par MiKa, 10 000+ installations actives) est la référence éprouvée pour intégrer OpenStreetMap sur WordPress. Il fonctionne via un shortcode généré depuis une interface graphique intégrée à chaque page ou article.
Étape 1 — Dans votre administration WordPress, allez dans Extensions → Ajouter une extension et recherchez “OSM MiKa”. Installez et activez le plugin.
Étape 2 — Ouvrez la page ou l’article dans lequel vous souhaitez insérer la carte. Faites défiler jusqu’en bas de l’éditeur — une metabox “WP OSM Plugin shortcode generator” est présente.
Étape 3 — Cliquez sur l’onglet “Map & Marker” dans la metabox. Une carte OpenStreetMap s’affiche.
Étape 4 — Utilisez la barre de recherche de la carte pour trouver votre adresse, puis cliquez sur la carte pour poser votre marqueur à l’emplacement exact.
Étape 5 — Le shortcode se génère automatiquement dans le champ vert en bas de la metabox. Copiez-le.
Étape 6 — Dans l’éditeur Gutenberg, ajoutez un bloc “Shortcode” à l’endroit souhaité et collez le shortcode généré.
Étape 7 — Publiez ou mettez à jour la page et vérifiez le rendu en prévisualisation.
Si vous utilisez WP-Optimize ou un plugin de minification JS : le script du plugin peut être cassé par la minification. Dans WP-Optimize → Minifier → JavaScript → Exclusions, ajoutez
osmpour exclure les scripts du plugin de la compression.
Alternative moderne — Out of the Block: OpenStreetMap (bloc Gutenberg natif)
Le plugin Out of the Block: OpenStreetMap propose un bloc Gutenberg natif — vous configurez la carte directement dans l’éditeur, sans shortcode. C’est plus intuitif mais le plugin est récent (peu d’installations, peu d’avis) — à réserver aux utilisateurs à l’aise avec Gutenberg.
Étape 1 — Installez et activez “Out of the Block: OpenStreetMap” depuis le répertoire WordPress.
Étape 2 — Dans Gutenberg, ajoutez un bloc “OpenStreetMap” et configurez la carte directement dans l’éditeur — cliquez sur la carte pour poser vos marqueurs.
Important : si vous utilisez WP-Optimize ou un plugin de minification, excluez le fichier
ootb-openstreetmapdes scripts minifiés — sans cette exclusion la carte ne s’affiche pas.
Méthode 2 — Intégrer Google Maps via embed (avec consentement)
Si vous souhaitez utiliser Google Maps pour ses fonctionnalités spécifiques (Street View, avis Google, itinéraires détaillés), voici la procédure — en vous assurant de gérer le consentement.
Étape 1 — Rendez-vous sur maps.google.com et recherchez votre adresse.
Étape 2 — Cliquez sur “Partager” puis sur l’onglet “Intégrer une carte”. Copiez le code <iframe> fourni par Google.
Étape 3 — Dans l’éditeur Gutenberg, ajoutez un bloc “HTML personnalisé” et collez le code iframe.
Étape 4 — Indispensable : configurez votre plugin de consentement (Complianz, Borlabs Cookie, Cookiebot…) pour bloquer le chargement de Google Maps jusqu’à l’acceptation des cookies par le visiteur. Sans cette étape, votre intégration est non conforme au RGPD.
Méthode 3 — Intégrer le Géoportail IGN via iframe
Étape 1 — Rendez-vous sur geoportail.gouv.fr et naviguez jusqu’à votre adresse.
Étape 2 — Cliquez sur l’icône de partage (🔗) puis sur “Intégrer la carte”.
Étape 3 — Copiez le code iframe généré et collez-le dans un bloc “HTML personnalisé” dans Gutenberg.
Étape 4 — Aucun consentement RGPD requis — le Géoportail ne dépose pas de cookies tiers.
Résultat attendu
Tableau récapitulatif
| Solution | Gratuit | RGPD | Consentement | Facilité WP | Idéal pour |
|---|---|---|---|---|---|
| Google Maps | Limité | ⚠ Problématique | Obligatoire | ★★★★★ | Fonctionnalités avancées (Street View, avis) |
| OpenStreetMap | ✓ | ✓ Conforme | Non requis | ★★★★ | Affichage d’adresse — usage courant |
| Géoportail IGN | ✓ | ✓ Irréprochable | Non requis | ★★★ | Sites institutionnels, données officielles |
| Leaflet.js | ✓ | ✓ Conforme | Non requis | ★★★ | Personnalisation avancée |
| À faire | À éviter |
|---|---|
| Utiliser OSM pour un affichage d’adresse simple | Intégrer Google Maps sans bandeau de consentement |
| Gérer le consentement si vous choisissez Google Maps | Intégrer une carte lourde qui ralentit le chargement |
| Vérifier que la carte est responsive (mobile) | Utiliser un embed Google Maps en HTTP au lieu de HTTPS |
| Associer la carte à votre fiche Google Business Profile | Oublier de renseigner votre adresse en texte en plus de la carte |
Ce qu’il faut retenir
Intégrer une carte est un geste simple qui renforce votre SEO local et améliore l’expérience de vos visiteurs. Pour la grande majorité des sites, OpenStreetMap via un plugin WordPress est la solution idéale : gratuite, conforme au RGPD sans bandeau de consentement, et techniquement aussi simple que Google Maps. Si vous choisissez Google Maps pour ses fonctionnalités spécifiques, la gestion du consentement n’est pas optionnelle — c’est une obligation légale.