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. 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 !

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

integrer carte wordpress sans google map avec open street map 8

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 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 statiqueCarte dynamiqueCarte statique street viewCarte dynamique street view
$200/mois offert
100 000 requêtes offertes par mois28 500 requêtes offertes par mois28 500 requêtes offertes par mois14 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 ?

integrer carte wordpress sans google map avec open street map 9

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.

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 pluaprt 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.

OSM – OpenStreetMap

integrer carte wordpress sans google map avec open street map

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

integrer carte wordpress sans google map avec open street map 2

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

integrer carte wordpress sans google map avec open street map 6

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. 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

integrer carte wordpress sans google map avec open street map 5

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 deux plugins récents dont les installations sont encore peu nombreuses mais qui mérite une attention particulier. En effet ce sont deux plugins qui proposent un block gutenberg natif pour l’insertion d’une simple carte Open street map.

OpenStreetMap for Gutenberg

integrer carte wordpress sans google map avec open street map 4

Le plugin OpenStreetMap for Gutenberg offre un block gutenberg permettant d’intégrer facilement une carte Open Street Map n’importe où sur les pages ou articles de votre site web. L’intérêt d’avoir un block gutenberg réside dans le fait qu’il ne sera pas nécessaire d’aller configuer la carte depuis le plugin. On le fera directement sur la page ou l’article où l’on souhaite intégrer la carte. Les possibilités sont limitées mais pourront être tout à fait suffisante pour la plupart des utilisateurs cherchant simplement à intégrer une carte simple.

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

Fonctionnalités

  • Choix du style de carte parmi l’un des fournisseurs de fonds de carte disponibles
  • Modifiez le ratio de l’aspect de la carte
  • Gérer le niveau de zoom
  • Centrer la carte par Latitude/Longitude

Out of the block : OpenStreetMap

integrer carte wordpress sans google map avec open street map 3

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

wpformation
NE MANQUEZ PLUS RIEN !
Inscrivez-vous pour recevoir le meilleur de WordPress dans votre boîte de réception, chaque mois.

Nous ne spammons pas ! Consultez notre politique de confidentialité pour plus d’informations.

A propos de l'auteur...

Avatar de Samuel Bourille

Samuel Bourille

Blogueur voyage et rédacteur web depuis 2015, j'ai la geek attitude depuis que j'ai mis le nez dans un ordinateur il y a pas mal d'années maintenant ! Wordpress est une source inépuisable de découvertes et de nouveaux défis à relever et même si l'écriture et la photographie sont ma passion première, j'avoue que j'aime beaucoup mettre les mains dans le cambouis.