Comment ajouter une carte sur WordPress avec OpenStreetMap (OSM) ?

Vous le savez (ou pas), mais depuis quelques années Google Map a décidé de changer sa politique tarifaire en matière d’intégration de ses cartes sur des sites web et cela inclut bien entendu les sites WordPress. Parcourez les plugins WordPress testés pour d'autres outils. On verra dans cet article les contraintes que cela implique pour ceux qui souhaitent utiliser les services de Google.

Face à ce problème, vous êtes nombreux à vous demander s’il existe une alternative à Google Map afin de pouvoir afficher une carte interactive sur son site WordPress. Et la réponse est… Oui ! D’ailleurs, si vous souhaitez comparer toutes les solutions disponibles, consultez notre comparatif de 8 plugins de cartes WordPress.

Cela se passe du côté des logiciels Open Source, terme qui désigne des solutions web entièrement gratuites et développées par une communauté de passionnés. Comme souvent, les solutions Open Source proposent des outils tout à fait sérieux et performants qui viennent concurrencer les produits payants des grandes entreprises.

Nous allons donc voir dans cet article qu’il est possible d’intégrer une carte sur WordPress sans utiliser Google Map et la solution s’appelle OpenStreetMap (OSM) !

Les limites de Google Maps

Depuis juin 2018 Google Maps requiert une clé API pour être intégrer sur un site WordPress. La firme américaine a changé sa politique tarifaire (pour en savoir plus sur l’optimisation de votre SEO WordPress) pour rendre payante l’utilisation de sa carte interactive aux sites à fort trafic sous forme d’un tarif pour un certain nombre de requêtes.

Qu’est-ce qu’une requête

Google considère une requête comme étant soit le chargement d’une Google Maps soit un appel à l’API. Les interactions des utilisateurs, comme les opérations de zoom ou de déplacement dans la carte, ne sont pas considérés comme des requêtes.

Facturation

Google offre un crédit mensuel de $200. Avec ce crédit la plupart des sites avec peu de trafic n’auront rien à payer. Vous ne serez facturés que si vous dépassez les $200 d’utilisation par mois.

À savoir également que l’utilisation de l’API Maps Embed standard est gratuite et n’est soumise à aucune limite. Pareil pour le SDK Maps pour Android ou iOS.

Tableau récapitulatif des tarifs Google Maps

Carte statique	Carte dynamique	Carte statique street view	Carte dynamique street view
$200/mois offert	#colspan#	#colspan#	#colspan#
100 000 requêtes offertes par mois	28 500 requêtes offertes par mois	28 500 requêtes offertes par mois	14 200 requêtes offertes par mois
$2 pour 1000 requêtes (gratuit sur mobile)	$7 pour 1000 requêtes (gratuit sur mobile)	$7 pour 1000 requêtes	$14 pour 1000 requêtes

OpenStreetMap (OSM) qu’est-ce que c’est ?

OpenStreetMap est un projet initié en 2004 qui vise à créer une base donnée cartographique mondiale. Open Street Map est un projet collaboratif où plus d’un million de passionnés bénévoles à travers le monde viennent améliorer quotidiennement le contenu de cette base de données.

Aujourd’hui on peut dire qu’OpenStreetMap a atteint une sorte de maturité. La qualité et la précision des cartes ne sont plus à démontrer et son modèle "Open source" et totalement gratuit a de quoi faire réfléchir ceux qui hésiteraient encore avec Google Map.

Quel intérêt à utiliser les cartes OpenStreetMap ?

Le premier intérêt à utiliser OpenStreetMap est peut-être simplement une histoire de "valeurs" : pourquoi utiliser un service proposé par un géant américain quand on peut utiliser un outil libre et gratuit ?

Le deuxième intérêt à utiliser OpenStreetMap est clairement lié aux nouvelles limites imposées par Google sur ses cartes. OpenStreetMap ne propose aucune limite d’utilisation. Un atout précieux pour votre stratégie de SEO local.

Le dernier intérêt à utiliser OpenStreetMap est que c’est un outil hautement personnalisable, tant dans l’aspect visuel des cartes que dans le contenu, on peut par exemple aisément intégrer des tracés GPS personnels et autres joyeusetés.

Quelles sont les limites d’OpenStreetMap ?

La principale limite que je verrais à l’utilisation d’OpenStreetMap réside peut-être dans l’absence de la fonctionnalité "information sur un lieu précis" présent dans Google Maps. C’est à dire que lorsqu’on zoom à fond dans une carte OpenStreetMap les lieux précis sont renseignés mais il n’est pas possible de cliquer dessus comme dans Google Maps pour avoir des informations dessus. Cela dit cette fonctionnalité n’est pas utile dans la plupart des utilisations.

L’autre limite se trouve dans l’utilisation des "tiles" ou "fonds de cartes" qui viennent modifier l’aspect visuel des cartes OpenStreetMap.

À ce sujet les équipes d’OSM ont publié un message clair : Nous vous autorisons à utiliser nos ressources de serveurs et à afficher nos fonds de carte directement sur vos cartes dynamiques de votre site internet, pour un usage marginal. Si vous souhaitez afficher ces fonds et utiliser nos ressources de serveurs pour un usage non marginal, merci de nous contacter. Il n'y a pas de garantie de disponibilité ou de niveau de service. Tout usage abusif pourra faire l'objet d'une limitation partielle ou totale de trafic, afin de préserver de bonnes conditions de contribution et de consultation pour l'ensemble de la communauté et du public.

La plupart des plugins qui utilisent OpenStreetMap passeront par des sites tiers pour les "fonds de carte" afin d’éviter tout problème avec les serveurs OSM.

Plugins WordPress pour intégrer une carte OpenStreetMap

WordPress étant une usine à plugin, vous imaginez bien qu’il existe de nombreux plugin permettant d’intégrer une carte OpenStreetMap sur son site WordPress.

Nous allons fait un petite tour des quelques plugins les plus utilisés et les mieux notés par la communauté WordPress. Vous y trouverez certainement le plugin qu’il vous faut pour l’utilisation que vous souhaiterez en faire. Pensez à maintenir vos plugins à jour pour garantir sécurité et compatibilité.

OSM – OpenStreetMap

Le plugin OpenStreetMap offre la possibilité d’intégrer une carte Open Street Map sur n’importe quelle page de votre site WordPress par l’intermédiaire d’une simple shortcode.

• Plugin dont les mises à jour sont à surveiller
• +10 000 installations
• Note 4,5/5

Fonctionnalités

• OpenStreetMap, HOT, OpenSeaMap, OpenTopoMap, BaseMap (AT), Stamen, WMS
• Intégration dans post / page / widget
• Marqueur HTML
• Intégration de traces GPX et KM
• Carte avec marqueurs liés aux articles/pages
• Utilise la bibliothèque OpenLayers

Maps Marker

Le plugin Maps Marker est un plugin qui commence a avoir une petite réputation. Bien que n’étant pas exclusivement dédié à intégrer une carte Open Street Map je l’ajoute à la liste car il offre différentes possibilités qui pourront peut-être vous intéresser.
Attention toutefois à vérifier les mises à jours car leur équipe a annoncer arrêter le développement de la version gratuite pour se concenter sur leur offre premium. Tout en assurant qu’ils effectueraient les mises à jour de sécurité nécessaire pour pouvoir continuer à utiliser le plugin sans risque.

• Plugin dont les mises à jour sont à surveiller
• +20 000 installations
• Note 4,5/5

Fonctionnalités

• Epingler des lieux avec des marqueurs
• Rechercher des lieux en utilisant des fournisseurs de géocodage sans clé comme MapZen Search, Algolia Places ou Photon@MapsMarker
• Indiquer un itinéraire
• Plus de 1000 icônes gratuites et personnalisables
• Ajouter un texte de description ou des images dans les popups pour chaque marqueur
• Organiser les marqueurs en couches
• Choisir un fond de carte, une taille et un niveau de zoom individuels pour chaque marqueur et chaque couche de la carte
• Afficher les cartes par simple shortcode aux posts, pages, widgets
• Utiliser une carte de base de votre choix : Open Street Map, Google Maps, Bing, Mapbox, carte WMTS…

Leaflet Map

Le plugin Leaflet Map permet de générer une carte avec LeafletJS : une bibliothèque JavaScript open-source pour des cartes interactives adaptées aux téléphones portables. Compatible avec l’éditeur Gutenberg. Par défaut, le plugin utilise Open Street Map et proposer un moyen très simple et basique d’insérer une carte. En revanche si vous voulez aller plus loing, ce sera par le biais d’attributs de shortcode et l’affaire pourra se compliquer un petit peu pour en comprendre le mécanisme.

• Plugin dont les mises à jour sont à surveiller
• +20 000 installations
• Note 4,5/5

Fonctionnalités

• Recherchez une adresse
• Connaître la latitude et la longitude d’un lieu
• Ajoutez un marqueur
• Ajouter des popups
• Ajoutez un lien
• Ajouter une ligne ou un cercle

Traveler’s Map

Le plugin Traveler’s Map est un plugin assez récent, mais cocorico il a été développé par une Française passionnée qui cherchait une solution pour son propre site web et qui ne trouvait pas l’outil idéal. Elle a donc décidé de le développer elle-même. C’est un plugin qui permet de facilement géolocaliser vos articles et de les afficher sur une carte. Très utile pour les blogueurs voyages notamment. Mais le plugin peut-être utilisé de manière plus simple pour afficher une simple adresse.

• Plugin dont les mises à jour sont à surveiller
• +600 installations
• Note 5/5

Fonctionnalités

• Géolocalisation des articles, page ou custom post type
• Module de recherche pour localiser rapidement l'emplacement désiré
• Personnalisation des marqueurs
• Popup personnalisables
• Intégration par simple shortcode
• Choix des dimensions de carte
• Filtre des publications par type, catégories et étiquettes
• Groupement automatiquement des marqueurs proches
• Design personnalisable via fournisseurs de tuiles OpenStreetMap

Pour terminer la liste des plugins wordpress pour intégrer une carte Open Street Map, je vous conseille de regarder ce que donne un plugin récent dont les installations sont encore peu nombreuses mais qui mérite une attention particulière. En effet, ce plugin propose un block Gutenberg natif pour l’insertion d’une simple carte Open street map.

Out of the block : OpenStreetMap

Le deuxième plugin offre une block gutenberg pour intégrer une carte Open Street Map c’est le plugin Out of the block : OpenStreetMap. Là encore le recul sur l’utilisation de ce plugin est très limitée et il convient d’être vigilant sur son utilisation. Mais ce plugin mérite d’être suivi de prêt car c’est à ma connaissance le seul plugin de carte offrant une expérience "WYSIWYG". Autrement dit, ce plugin offre une expérience utilisateur assez novatrice pour un plugin de carte.

• Plugin dont les mises à jour sont à surveiller
• +100 installations
• Note 5/5

Fonctionnalités

• Prise en charge de plusieurs marqueurs.
• Intégration de marqueurs par simple clic sur la carte
• Modification du contenu du marqueur directement sur la carte
• Champs recherche pour trouver des lieux en tapant des mots clés
• Réglage du zoom
• Ajuster les dimensions de la carte
• Ajout d’icône personnalisée
• Activez ou désactivez le glissement de la carte
• Activez ou désactivez le zoom tactile
• Activer ou désactiver le zoom par double-clic
• Activez ou désactivez le zoom par la molette de défilement
• Définir une limite minimale et maximale pour le zoom
• Prise en charge d’autres fournisseurs de fonds de carte : MapBox et Stamen

Questions fréquentes sur OpenStreetMap et WordPress

OpenStreetMap est-il vraiment gratuit pour un site WordPress ?

Oui, OpenStreetMap est un projet open source entièrement gratuit. Il n’y a ni clé API à obtenir, ni crédit mensuel limité, ni facturation au nombre de requêtes. Les plugins WordPress basés sur OSM sont également gratuits dans leur version de base. La seule contrainte concerne les fonds de carte (tiles) : pour un usage intensif, il est recommandé d’utiliser un fournisseur tiers plutôt que les serveurs OSM directement.

Quelle est la différence entre Google Maps et OpenStreetMap sur WordPress ?

Google Maps nécessite une clé API et devient payant au-delà de 200 $/mois de crédit gratuit. Il offre des fonctionnalités avancées comme Street View et les fiches d’établissement. OpenStreetMap est 100 % gratuit, open source et sans limite d’utilisation, mais ne propose pas d’informations commerciales sur les lieux. Pour la plupart des sites WordPress, OSM est largement suffisant.

Quel plugin OpenStreetMap choisir pour un blog de voyage WordPress ?

Traveler’s Map est le plugin idéal pour les blogs de voyage. Développé par une passionnée française, il permet de géolocaliser vos articles et de les afficher automatiquement sur une carte interactive. Les visiteurs peuvent cliquer sur les marqueurs pour accéder directement à vos récits de voyage. Le plugin est gratuit et noté 5/5 sur WordPress.org.

Comment intégrer une carte OpenStreetMap dans Gutenberg ?

Le plugin Out of the Block: OpenStreetMap offre un bloc Gutenberg natif pour insérer une carte OSM directement dans l’éditeur. Vous configurez la carte (marqueurs, zoom, style) directement sur la page, en mode WYSIWYG. Alternativement, les plugins OSM et Leaflet Map fonctionnent via des shortcodes à insérer dans un bloc HTML.

OpenStreetMap est-il aussi précis que Google Maps ?

En termes de cartographie, OpenStreetMap a atteint un niveau de maturité comparable à Google Maps, grâce à plus d’un million de contributeurs bénévoles dans le monde. Les rues, bâtiments et points d’intérêt sont très bien renseignés, surtout en Europe. La principale différence réside dans l’absence d’informations commerciales (horaires, avis, photos) que propose Google Maps via ses fiches d’établissement.