Comment créer des marqueurs de carte personnalisés (le guide complet)

Si vous avez déjà essayé d'ajouter des marqueurs de carte personnalisés à un site d'annuaires, une carte Leaflet ou un tableau de bord Mapbox, vous connaissez déjà le problème.

Les marqueurs par défaut ont l'air génériques.

Si vous avez déjà essayé d'ajouter des marqueurs de carte personnalisés à un site d'annuaires, une carte Leaflet ou un tableau de bord Mapbox, vous connaissez le cycle.

Les marqueurs par défaut ont l'air génériques. Les outils gratuits existants couvrent généralement une seule bibliothèque d'icônes (souvent Font Awesome) et ne génèrent que des PNG.

Dès que vous avez besoin d'un marqueur utilisant une icône Lucide, correspondant exactement à vos couleurs de marque, ou exporté en SVG propre que vous pouvez recolorer avec du CSS, vous vous retrouvez de nouveau dans Illustrator ou à coller des chemins SVG dans un CodePen..

Nous développons GeoDirectory depuis plus de 12 ans, et les marqueurs de carte personnalisés reviennent dans les tickets d'assistance chaque semaine sans exception.

Alors nous avons créé l'outil que nous aurions voulu voir exister : MapMarker Studio.

Il est gratuit, fonctionne dans le navigateur, ne nécessite aucune inscription, inclut plus de 40 000 icônes, permet de télécharger des marqueurs de carte SVG ou PNG au pixel près, et génère du code prêt à coller pour toutes les principales plateformes de cartographie.

Cet article est le guide complet pour créer des marqueurs de carte personnalisés.

Ce qu'ils sont, pourquoi les marqueurs par défaut sont insuffisants, comment en concevoir de bons, et comment les intégrer concrètement dans votre carte.

Qu'est-ce qu'un marqueur de carte personnalisé ?

Un marqueur de carte est l'indicateur visuel qui épingle un emplacement sur une carte.

Chaque plateforme de cartographie est livrée avec un marqueur par défaut.

Google Maps a sa goutte rouge, Leaflet a une épingle bleue, et Mapbox utilise un cercle.

Ils font le travail, mais ils ne marquent pas les esprits.

Lorsque vous avez plusieurs types d'emplacements sur une carte (restaurants vs. hôtels, ouvert vs. fermé, gratuit vs. payant), vous avez besoin d'une différenciation visuelle que les marqueurs par défaut ne vous offrent pas.

Un marqueur de carte personnalisé est tout marqueur que vous avez conçu ou personnalisé vous-même.

Une forme différente, une couleur différente, une icône à l'intérieur, un libellé, une ombre — tout ce qui aide les utilisateurs à parcourir la carte plus rapidement.

Il existe trois catégories à connaître.

Marqueurs basés sur des images sont des fichiers PNG ou SVG placés sur la carte à des coordonnées précises.

Simples, universels, pris en charge partout. L'inconvénient est que le PNG ne s'affiche pas nettement sur les écrans Retina, sauf si vous utilisez du SVG, et tout changement de couleur implique une réexportation.

Marqueurs symboliques ou iconiques sont des formes vectorielles dessinées directement par la bibliothèque de cartographie, stylisées par le code.

Nets à n'importe quel niveau de zoom, faciles à recolorer à la volée. Natifs des bibliothèques comme Mapbox GL et Leaflet (via des plugins).

Marqueurs HTML utilisent un élément HTML complet comme marqueur. Utiles pour les clusters, les badges d'information et les épingles animées.

Plus flexibles, mais plus coûteux à restituer à grande échelle.

Pour 90 % des cas d'usage dans les annuaires et les tableaux de bord, les marqueurs SVG sont le bon choix. Nets, légers, faciles à changer de couleur, et compatibles avec toutes les plateformes.

Pourquoi les marqueurs par défaut ne suffisent pas

Trois raisons pour lesquelles les gens finissent par avoir besoin de marqueurs personnalisés.

Plusieurs catégories sur une même carte. Si votre carte affiche des restaurants, des hôtels et des stations-service, vous avez besoin de trois marqueurs visuellement distincts. Même forme avec des icônes différentes, ou même icône avec des couleurs différentes. Les valeurs par défaut ne vous en donnent qu'une.

Cohérence de la marque. Un tableau de bord SaaS aux gris neutres et à une seule couleur d'accent ne devrait pas avoir une épingle rouge Google qui détonne. Le marqueur fait partie de l'interface.

Densité d'information. Sauf si vous utilisez une extension Marker Cluster, une carte avec 200 marqueurs nécessite des marqueurs plus simples et plus petits qu'une carte avec 8. La taille par défaut est prévue pour une « densité modérée » et paraît inadaptée aux deux extrêmes.

Ce qui fait un bon marqueur de carte

Des années de création de cartes pour des sites WordPress nous ont appris quelques règles. Aucune n'est surprenante. La plupart des outils existants les ignorent quand même.

Reconnaissable en petite taille. La plupart des marqueurs s'affichent entre 24 et 32 pixels. Si votre icône est illisible à cette taille, le marqueur est raté. Testez en plissant les yeux.

Fort contraste par rapport à la carte. Les marqueurs clairs sur des tuiles de carte claires disparaissent. Choisissez une couleur de remplissage et une bordure contrastée pour que le marqueur soit lisible sur les thèmes satellite, rue et sombre.

Une silhouette de forme bien définie. L'épingle en forme de larme est emblématique pour une bonne raison. Elle possède une « pointe » claire qui indique l'emplacement. Les cercles, les carrés et les hexagones fonctionnent bien, mais un marqueur sans point d'ancrage clair peut amener les utilisateurs à mal interpréter le point de la carte auquel il se réfère.

L'icône à l'intérieur du marqueur, pas à côté. Les marqueurs avec l'icône à l'extérieur (style étiquette) encombrent la carte. Gardez le sens à l'intérieur de la silhouette.

Trois couleurs maximum. Marqueur, icône et un élément d'accentuation. Au-delà, le marqueur paraît surchargé aux petites tailles.

Les 8 formes de marqueurs qui couvrent 95 % des cas d'utilisation

Nous avons testé des dizaines de silhouettes de marqueurs sur de vraies cartes GeoDirectory. Ces huit-là gèrent presque tout.

Épingle (goutte classique). L'emblématique épingle Google Maps. La meilleure option par défaut.
Cercle. Minimaliste et moderne. Idéal pour les cartes denses.
Carré arrondi. Une touche Material Design. Parfait pour les interfaces de style application.
Carré. Précis et technique. Convient aux tableaux de bord architecturaux ou de données.
Drapeau. Ambiance destination et ligne d'arrivée. Idéal pour les événements et les points de départ/arrivée.
Bouclier. Sécurité, protection, officiel. Idéal pour les services d'urgence ou les annonces vérifiées.
Hexagone. Tendance dans la tech et la visualisation de données. Parfait pour les tableaux de bord modernes.
Bulle de dialogue. Contextes d'avis et de chat. Idéal pour les témoignages ou les marqueurs de commentaires.

MapMarker Studio inclut les huit formes comme points de départ.

Choisir la bonne icône

L'icône à l'intérieur du marqueur porte le sens. Choisissez la mauvaise icône et même un marqueur magnifiquement conçu échoue. Quelques conseils.

Utilisez une seule bibliothèque d'icônes sur toute votre carte. Mélanger Font Awesome avec Lucide et des SVG personnalisés crée du bruit visuel. Choisissez une bibliothèque et tenez-vous-y.

Faites correspondre le style des icônes au style des marqueurs. Des icônes en contour pour des marqueurs en contour, des icônes pleines pour des marqueurs pleins. La cohérence de style compte plus que le choix de la bibliothèque.

Évitez les icônes avec des traits fins. Un trait de 1px disparaît à la taille d'un marqueur. Choisissez des icônes avec une épaisseur de 1,5px ou plus, ou des bibliothèques proposant plusieurs épaisseurs (Phosphor est excellent pour cela).

MapMarker Studio intègre 14 des meilleures bibliothèques d'icônes : Lucide, Phosphor, Tabler, Font Awesome, Heroicons, Material Symbols, Iconoir, Remix, Boxicons, Bootstrap Icons, Mage, Octicons, Radix et Simple Icons (pour les logos de marques tels que Airbnb, Starbucks et TripAdvisor).

Plus de 40 000 icônes au total. Toutes gratuites pour un usage commercial.

Comment ajouter des marqueurs personnalisés à votre carte

Le code exact dépend de votre plateforme. Voici comment cela fonctionne dans les plus courantes, y compris la partie qui pose généralement problème.

Leaflet

const customIcon = L.icon({
  iconUrl: 'https://your-cdn.com/marker.svg',
  iconSize: [32, 40],
  iconAnchor: [16, 40],   // tip of the marker
  popupAnchor: [0, -40]
});

L.marker([40.7128, -74.0060], { icon: customIcon }).addTo(map);

Le piège :

iconAnchor

est le décalage en pixels depuis le coin supérieur gauche de l'icône jusqu'au point sur la carte qu'elle doit épingler. Pour une épingle en forme de larme, il s'agit du centre bas (la pointe). Si vous vous trompez ici, votre marqueur pointera vers le mauvais emplacement.

Mapbox GL JS

const el = document.createElement('div');
el.style.backgroundImage = 'url(https://your-cdn.com/marker.svg)';
el.style.width = '32px';
el.style.height = '40px';
el.style.backgroundSize = 'contain';

new mapboxgl.Marker(el)
  .setLngLat([-74.0060, 40.7128])
  .addTo(map);

Le piège : Mapbox utilise l'ordre

[lng, lat]

tandis que Leaflet utilise

[lat, lng]

. Les développeurs les confondent sans arrêt.

Google Maps

new google.maps.Marker({
  position: { lat: 40.7128, lng: -74.0060 },
  map: map,
  icon: {
    url: 'https://your-cdn.com/marker.svg',
    scaledSize: new google.maps.Size(32, 40),
    anchor: new google.maps.Point(16, 40)
  }
});

Le piège : Google Maps met agressivement en cache les URL d'icônes. Si vous testez des modifications sur la même URL SVG, ajoutez un

?v=2

cache buster.

GeoDirectory

Pour les utilisateurs de GeoDirectory, les marqueurs personnalisés se placent dans Catégories → Modifier la catégorie → Icône de catégorie par défaut. Importez le SVG ou le PNG, et GeoDirectory l'utilisera automatiquement pour chaque annonce dans cette catégorie.

Image URL: https://your-cdn.com/restaurant-marker.svg
Recommended size: 36×46 px

MapMarker Studio génère un fichier SVG prêt pour GeoDirectory, avec les bonnes dimensions et le bon point d'ancrage. Déposez-le, et c'est tout.

Concevez une fois, exportez partout

La raison pour laquelle nous avons créé MapMarker Studio, c'est la boucle décrite ci-dessus. Vous concevez un marqueur dans Figma, exportez un SVG, écrivez la configuration Leaflet de mémoire (et vous vous trompez dans l'iconAnchor la première fois), vous testez, corrigez, déployez. Puis vous recommencez pour chaque catégorie de votre carte.

L'outil réduit cette boucle à quatre étapes.

Choisissez une forme (8 options).
Choisissez une icône (plus de 40 000 réparties dans 14 bibliothèques).
Choisissez les couleurs.
Du code prêt à copier-coller pour Leaflet, Mapbox et Google Maps. Ou téléchargez directement le SVG/PNG pour la plupart des plugins de cartographie et d'annuaires WordPress.

Tout fonctionne dans votre navigateur. Sans inscription. Sans envoi vers un serveur. Gratuit.

Essayez MapMarker Studio →

Une note sur le format de fichier

Si vous ne retenez qu'une chose de ce guide : utilisez le SVG. Le PNG est acceptable en solution de secours lorsque votre plateforme ne prend vraiment pas en charge le SVG, mais c'est rare en 2026.

Le SVG reste net à tous les niveaux de zoom, présente des tailles de fichiers plus petites pour une complexité de marqueur habituelle, et prend en charge la recoloration via les variables CSS. Le PNG perd en qualité sur les écrans Retina, sauf si vous fournissez des variantes 2× et 3×.

La seule exception concerne les performances à très grande échelle. Les cartes avec 1 000 marqueurs simultanés ou plus peuvent s'afficher légèrement plus vite avec le format PNG. Pour tout ce qui est en dessous de ce seuil, SVG est le meilleur choix.

En résumé

La création de marqueurs de carte personnalisés fait partie de ces tâches qui semblent devoir prendre 10 minutes et finissent par en prendre deux. La plupart des difficultés viennent des outils.

Chaque solution existante est soit trop restrictive, soit trop coûteuse, soit trop générique.

Nous avons créé MapMarker Studio parce que nous nous étions nous-mêmes heurtés à ce mur des dizaines de fois sur des installations GeoDirectory.

Il est gratuit, il le restera, et il fonctionne avec toutes les plateformes de cartographie auxquelles nous avons pu penser.

Si vous trouvez un cas d'usage qu'il ne couvre pas, faites-le nous savoir. L'outil s'améliore grâce à vous.

Ouvrir MapMarker Studio →