Vous avez besoin d’une carte interactive sur votre site WordPress et le simple Google Maps ne suffit pas? Une carte en iframe standard ne propose ni zones cliquables, ni infobulles, ni répertoire d’objets filtrable. Et votre client souhaite une carte avec recherche d’adresse et des régions colorées selon des statistiques.

MapSVG est l’un des rares plugins WordPress à couvrir tout cela avec un seul outil. Il est utilisé par plus de 16 000 sites et la version gratuite disponible sur WordPress.org vous permet de tester presque toutes les fonctionnalités de base sans payer. Vous trouverez ci-dessous une analyse détaillée des fonctionnalités, un guide de mise en œuvre pratique et un avis honnête sur le profil d’utilisateur auquel ce plugin est destiné, et sur ceux qui devraient chercher une autre solution.

💡 Aperçu rapide:

• Chargez une carte SVG prête à l’emploi depuis la bibliothèque intégrée ou importez votre propre fichier.
• Associez des objets de base de données avec des champs personnalisés aux régions.
• Configurez les infobulles et les fenêtres contextuelles via l’éditeur de templates.
• Si nécessaire, superposez la carte vectorielle sur Google Maps.
• Insérez le shortcode sur une page et vérifiez le résultat.

Ce que MapSVG peut faire: présentation des fonctionnalités clés

Le plugin est développé par Roman Stepanov (RomanCode sur WordPress.org). Le projet est actif depuis 2012 et bénéficie de mises à jour régulières: en juin 2026, la version 8.6.6 est la plus récente, avec plusieurs publications par mois d’après le journal des modifications. C’est un point important pour un plugin qui interagit avec l’API Google Maps, car sans mises à jour régulières, les cartes cessent de fonctionner dès que la clé API change.

Plus de 100 cartes géocalibrées prêtes à l’emploi

Le plugin est livré avec une bibliothèque de plus de 100 cartes SVG géocalibrées. La carte du monde est déjà divisée en pays cliquables. Les cartes de pays avec leurs divisions en États, provinces et régions sont disponibles séparément. Il existe également plusieurs cartes thématiques.

La géocalibration signifie que chaque zone de la carte est liée à des coordonnées réelles. Vous pouvez ajouter des marqueurs par adresse ou par latitude/longitude, et ils se positionneront précisément sur la bonne région. Vous ne trouvez pas la carte qu’il vous faut dans la bibliothèque? Dessinez un SVG dans Inkscape ou Adobe Illustrator, importez-le dans MapSVG, et le plugin transforme votre fichier vectoriel en carte interactive avec des zones cliquables.

Objets de base de données avec champs personnalisés

Cette fonctionnalité distingue MapSVG de la plupart des plugins de cartographie pour WordPress. Vous créez des entrées (objets) dans la base de données intégrée du plugin avec tous les champs dont vous avez besoin: texte, nombres, images, cases à cocher, listes déroulantes. Ensuite, vous liez un objet à une région spécifique de la carte.

Exemple: une agence immobilière crée des objets pour des biens avec l’adresse, le prix, la surface et des photos. Chaque objet est lié à une région sur la carte. Un visiteur clique sur une zone et voit la fiche du bien dans une belle fenêtre contextuelle, une vue détaillée ou une infobulle. Aucun plugin externe n’est nécessaire pour le stockage des données; tout reste dans MapSVG.

Répertoire avec filtrage et recherche

Les objets de la base de données peuvent être affichés non seulement sur la carte, mais aussi sous forme de répertoire filtrable à côté de celle-ci. Lorsqu’un utilisateur saisit une requête dans la barre de recherche ou sélectionne une valeur dans un filtre déroulant, le répertoire et la carte se mettent à jour de manière synchronisée. Cliquer sur une région de la carte filtre le répertoire, et inversement.

Les versions premium ajoutent des filtres par catégorie, code postal et date. L’import CSV est pris en charge et, à partir de l’offre Plus, les données peuvent être extraites directement de Google Sheets (lorsque la source est mise à jour, la carte se met à jour automatiquement).

Superposition de carte vectorielle sur Google Maps

Les Google Maps standards via iframe n’offrent quasiment aucune personnalisation. MapSVG résout ce problème de manière radicale: vous superposez votre propre couche SVG interactive par-dessus Google Maps, quel que soit le type de fond (satellite, relief, plan, hybride). Tout ce dont vous avez besoin, c’est d’une clé API Google Maps.

La couche vectorielle est entièrement cliquable: les zones, les marqueurs et les infobulles fonctionnent exactement comme sur une carte SVG classique. Le résultat est une carte qui ressemble à Google Maps, mais qui se comporte comme une application web entièrement personnalisée. La mise en évidence de points de repère, les itinéraires interactifs et les régions sont tous configurables.

Éditeurs intégrés CSS, JavaScript et templates Handlebars

Pour ceux qui travaillent avec du code, MapSVG propose trois éditeurs intégrés. L’éditeur CSS vous permet de modifier les styles des infobulles, des fenêtres pop-up et des marqueurs tout en visualisant le résultat en temps réel. L’éditeur JavaScript vous permet de vous connecter aux événements de la carte (clic sur une région, survol) et d’écrire une logique middleware. L’éditeur de templates Handlebars vous donne un contrôle total sur la structure HTML des infobulles, des fenêtres popover et des vues détaillées.

Concrètement, cela signifie qu’un template d’infobulle avec une photo, un prix et un bouton «En savoir plus» peut être créé en cinq minutes. Et via JavaScript, vous pouvez, par exemple, envoyer une requête AJAX lors du clic sur une région et charger dynamiquement des données.

Panneau de contrôle avec aperçu en temps réel

L’interface de MapSVG est un panneau dédié au sein de l’administration WordPress. La création d’une carte se fait étape par étape: choisir la source, configurer les régions, les couleurs, les infobulles, publier. Toutes les modifications apparaissent instantanément dans la fenêtre d’aperçu; vous n’avez pas besoin d’enregistrer et de rafraîchir la page pour voir le résultat.

La navigation s’effectue via un menu déroulant organisé par sections (Régions, Couleurs, Templates, Paramètres). L’interface peut sembler intimidante pour les débutants car les options sont nombreuses, mais après la première heure, la logique devient claire.

Cartes à partir d’images matricielles

MapSVG ne fonctionne pas seulement avec des SVG vectoriels, mais aussi avec des fichiers PNG et JPEG classiques. Les outils de dessin intégrés vous permettent de tracer des zones sur une image matricielle, et celles-ci deviennent des zones cliquables. Cela ouvre des scénarios que les cartes vectorielles ne peuvent pas gérer: plans d’étage interactifs, plans de table, schémas techniques, itinéraires et plans de ville.

Techniquement, vous prenez une photo d’un plan de bâtiment, tracez les pièces avec l’outil «Dessiner une région», ajoutez des étiquettes, et vous obtenez un plan interactif où un clic sur une pièce affiche des informations la concernant. Les clients des secteurs de l’événementiel et de l’immobilier apprécieront cette fonctionnalité.

Guide pratique: installation et création de votre première carte

L’installation de MapSVG ne diffère en rien de celle de n’importe quel autre plugin WordPress. La différence réside dans le processus de création de carte: vous devez parcourir le menu au moins une fois pour comprendre la logique de l’interface. Ensuite, tout roule.

Étape 1. Installation du plugin

Téléchargez MapSVG depuis WordPress.org (version Lite gratuite) ou achetez la version premium sur mapsvg.com. Ensuite, dans l’administration WordPress: Extensions → Ajouter → Téléverser une extension.

Cliquez sur Téléverser (1), sélectionnez le fichier ZIP du plugin (2), puis sur Installer maintenant (3):

Patientez jusqu’à la fin de l’installation et activez:

Voilà. Un élément MapSVG apparaît dans le menu latéral de l’administration; cliquez dessus.

Étape 2. Création d’une carte à partir d’un modèle prêt à l’emploi

Sur l’écran d’accueil du panneau MapSVG, vous verrez plusieurs options: choisir une carte prête à l’emploi, créer une carte Google (après avoir inséré une clé API), construire une carte image, téléverser votre propre fichier SVG ou superposer un fichier SVG sur Google Maps. Les liens Tutoriels et Support en haut du panneau renvoient vers la documentation et l’assistance.

Choisissez Nouvelle carte SVG et trouvez la carte dont vous avez besoin dans la liste déroulante. Pour cet exemple, nous utiliserons la carte de la Chine, qui est divisée en provinces et entièrement prête à l’emploi.

Sur l’écran suivant, renseignez le titre de la carte. Vous pouvez également y configurer la taille, l’adaptabilité (activée par défaut), les infobulles et les fenêtres contextuelles. Les régions sont déjà cliquables et la carte est prête à être personnalisée.

Étape 3. Configuration des couleurs

Allez dans Menu → Couleurs. La palette de couleurs vous permet de définir les teintes des régions, de l’arrière-plan, du contour et des états (survol, actif). Il n’y a aucune restriction; choisissez les nuances qui vous conviennent.

Une fois les couleurs définies, cliquez sur Enregistrer Ctrl + S:

La carte se recolore immédiatement dans la fenêtre d’aperçu. Quelques clics suffisent pour finaliser la palette de couleurs.

Étape 4. Ajout d’infobulles

Créez un modèle d’infobulle. Allez dans Menu → Modèles → Infobulle de région. L’éditeur de modèles Handlebars prend en charge la balise {{title}}, qui affiche le nom de la région. Modèle de base:

1
Region: <strong>{{title}}</strong>

Cliquez sur Enregistrer Ctrl + S. Activez ensuite les infobulles: Menu → Paramètres → Infobulles.

Désormais, lorsque vous survolez une région, une infobulle avec son nom apparaît. C'est le scénario de base. Pour ajouter des photos, des prix et d'autres données dans l'infobulle, vous aurez besoin de champs personnalisés.

Étape 5. Champs personnalisés via les objets de base de données

MapSVG vous permet d'ajouter des champs personnalisés aux régions. Les types de champs incluent texte, zone de texte, case à cocher, images et autres. Créons un champ de type image.

Allez dans Menu → Régions et cliquez sur Modifier les champs:

Cliquez sur le bouton Image pour ajouter un champ de type image, puis sur Enregistrer les champs:

N'oubliez pas de cliquer sur Enregistrer Ctrl + S. Passez ensuite à l'onglet Liste:

Activez le mode Modifier les régions et cliquez sur la région souhaitée (par exemple, Nei Mongol). Un nouveau champ Images apparaîtra sur la droite. Cliquez sur Parcourir:

Ajoutez des images via la médiathèque WordPress et cliquez sur Sélectionner les images:

Le système vous ramènera à l'écran de modification de la région. Cliquez sur OK (1), puis sur Enregistrer Ctrl + S (2), et repassez en mode Aperçu (3):

Les images sont ajoutées, mais elles n'apparaîtront pas encore dans l'infobulle; vous devez mettre à jour le template. Allez dans Menu → Templates → Infobulle de région et remplacez le code:

1
Region: <strong>{{title}}</strong><br />
2
First image:<br />
3
<img src="{{images.0.thumbnail}}" width="40px" /><br /><br />
4
All images:<br />
5
{{#each images}}
6
    <img src="{{thumbnail}}" width="40px" />
7
{{/each}}

Enregistrez le modèle. Désormais, lorsque vous survolez Nei Mongol, l’infobulle affiche les images téléchargées:

Étape 6. Publier la carte sur votre site

Enregistrez toutes les modifications. Allez dans Pages → Ajouter, cliquez sur le bouton MapSVG au-dessus de l’éditeur:

Sélectionnez la carte créée dans la liste, et le plugin insérera le shortcode [mapsvg id="17" title="China"]. Publiez la page et vérifiez le résultat sur le frontend:

La carte est entièrement responsive; sur les appareils mobiles, les régions et les infobulles fonctionnent sans perte de fonctionnalité. Le shortcode peut être inséré dans n’importe quel article, page ou widget, et la carte se chargera correctement.

⁉️🤔 Foire aux questions

Ai-je besoin d’une clé API Google Maps pour que MapSVG fonctionne?

Uniquement si vous prévoyez d’utiliser la couche Google Maps. Pour travailler avec les cartes SVG prêtes à l’emploi de la bibliothèque et vos propres fichiers SVG, aucune clé n’est requise. Si vous avez besoin de Google Maps, obtenez une clé API depuis la Google Cloud Console et saisissez-la dans les paramètres du plugin; la procédure prend quelques minutes.

Puis-je télécharger mon propre fichier SVG?

Oui. Dessinez une carte dans Inkscape ou Adobe Illustrator, enregistrez-la au format SVG, téléchargez-la dans MapSVG. Le plugin transformera automatiquement les formes vectorielles en régions cliquables. Si la carte n’est pas géo-calibrée, les marqueurs par adresse ne fonctionneront pas; vous devrez les placer manuellement.

Quelle est la différence entre la version payante et la version gratuite?

La version gratuite Lite vous offre un nombre illimité de cartes et de marqueurs, des infobulles, des fenêtres popover et des champs personnalisés. Les versions payantes ajoutent des fonctionnalités progressivement: Starter (49 $/an) ajoute un annuaire filtrable et des modèles personnalisés; Plus (99 $/an) ajoute l’intégration Google Sheets, ACF et Metabox; Pro (199 $/an) ajoute le regroupement de marqueurs et l’édition front-end; Elite (299 $/an) ajoute l’API REST et les sources de données MySQL. Des licences à vie sont également disponibles, allant de 99 $ à 599 $.

Le plugin convient-il aux non-développeurs?

Une carte basique avec des régions et des infobulles peut tout à fait être réalisée sans code; l’interface est visuelle. Mais dès que vous avez besoin de modèles d’infobulles personnalisés (Handlebars) ou de style (CSS), une compréhension minimale du HTML vous aidera. La documentation sur mapsvg.com/docs est rédigée avec des exemples, et le support répond rapidement.

Les cartes ralentissent-elles le site?

Non. Une carte SVG est un fichier vectoriel qui pèse quelques kilo-octets, pas des méga-octets. Le rendu s’effectue via JavaScript côté client. Avec un grand nombre de marqueurs (des centaines ou des milliers), nous recommandons d’activer le regroupement, disponible à partir de la version Pro.

Qu’en est-il du support et des mises à jour?

Le plugin est mis à jour plusieurs fois par mois; le journal des modifications sur WordPress.org montre que le développeur corrige activement les bugs et ajoute des fonctionnalités. Le support est disponible via un chat intégré directement depuis le panneau d’administration (après activation). Les utilisateurs notent dans les avis que les réponses sont rapides, mais en raison des décalages horaires, une réponse peut prendre plusieurs heures.

MapSVG vaut-il l’achat: verdict final

MapSVG est un outil spécialisé qui surpasse largement les plugins Google Maps standards lorsque vous avez besoin d’une réelle interactivité: régions cliquables, annuaires filtrables et infobulles personnalisées. Si votre besoin se limite à «insérer une carte d’itinéraire», le plugin est surdimensionné. Si votre projet est une carte immobilière, un localisateur de points de vente, des statistiques régionales interactives ou un plan de salle, MapSVG est l’une des meilleures options du marché WordPress.

La version gratuite Lite couvre des scénarios pour lesquels d’autres plugins facturent déjà: cartes et marqueurs illimités, champs personnalisés, infobulles et fenêtres popover. C’est une générosité rare pour un modèle freemium; vous pouvez lancer un projet sans budget et acheter un plan lorsque vous avez besoin de filtres, d’un annuaire ou de l’intégration Google Sheets.

Notre expérience: après une soirée passée avec la documentation, une carte de la Chine avec des infobulles et des images était prête. Oui, l’interface n’est pas intuitive au premier abord (beaucoup d’options et de menus), mais la courbe d’apprentissage est courte. Les éditeurs CSS/JS/Handlebars intégrés sont une aubaine pour les développeurs: pas besoin de fouiller dans les fichiers du thème.

Si vous cherchez un plugin de carte WordPress et que vous ne voulez pas vous heurter aux limites de la version gratuite en un mois, commencez par MapSVG Lite sur WordPress.org. Et si vous avez besoin d’une alternative, consultez notre comparatif des plugins de carte WordPress, où nous avons comparé une douzaine d’options pour différents cas d’usage.