Faut-il remplacer Google Maps par OpenStreetMap ?
Google Maps est la référence en matière de cartographie sur Internet. Avec WordPress, il permet d’ajouter facilement une carte à un formulaire de contact. Cependant il y a d’autres solutions.
En juillet 2018, une nouvelle tarification du service de cartographie de Google Maps est entrée en vigueur. Cela n’a pour l’instant pas d’impact sur les sites peu fréquentés. En effet le déclenchement du paiement commence à 28 000 affichages par mois. Mais qui sait de quoi demain sera fait ? De plus, Google Maps nécessite maintenant de posséder un compte et il faut pour cela enregistrer une carte de paiement.
Depuis le 25 mais 2018, le RGPD remet en question la pertinence d’utiliser Google Maps. En effet ce règlement demande la mise en place d’une politique de confidentialité, et celle-ci nécessite d’être clair sur les données privées collectées.
Comme vous le savez, utiliser un service tiers gratuit est, bien souvent, synonyme de récupération des données par le service en question. Ne nous voilons pas la face : rien n’est gratuit. Comme les hébergeurs de vidéos (YouTube, Vimeo…) Google Maps suit les visiteurs de votre site.
La question d’une alternative à Google Maps se pose donc. Il se trouve qu’en matière de cartographie il existe un service issue du monde du logiciel libre : OpenStreetMap. Le service est de bonne qualité, facile à mettre en œuvre et de par ses principes fondateurs ne piste pas les utilisateurs.
Comment remplacer Google Maps par OpenStreetMap ?
Nous allons voir maintenant comment se débarrasser de Google Maps en mettant en place une solution vraiment gratuite : OpenStreetMap.
Les manipulations suivantes s’appliquent à n’importe quel thème ou constructeur WordPress. Dans l’exemple suivant j’utilise le constructeur de page Elementor, mais cela ne change rien sur le fond. Elementor embarque une fonction de cartographie qui ne prend en compte que Google Maps.
Si l’on veut utiliser OpenStreetMap, deux possibilités :
- embarquer la carte dans un iframe,
- utiliser une extension.
Il m’a semblé plus simple d’utiliser une extension. C’est donc cette solution que je vais décrire.
Si vous souhaitez utiliser l’option iframe, il vous faudra commencer par créer une carte en utilisant le service Umap d’OSM. La création d’un compte est gratuite (vous pouvez faire un don). Pour découvrir les possibilité d’Umap je vous recommande le didacticiel de Johann Nallet.
Utiliser une extension pour intégrer une carte OSM dans WordPress
Nous allons voir comment insérer une simple carte avec un point de repère, comme on peut le faire dans une page de contact pour indiquer une adresse.
Il existe plusieurs extensions. J’en ai retenu deux :
- OSM – OpenStreetMap (ne pas confondre avec le site OSM)
La version gratuite de LeafLet Maps Marker pose des problèmes d’affichage avec Elementor. La carte s’affiche sur une moitié verticale de l’écran.
Sur les conseils de son développeur, j’ai testé la version Pro (30 jour d’essai gratuit). En effet, elle ne présente pas de problème d’affichage avec Elementor. Toutefois, bien que la version Pro offre beaucoup de fonctionnalités. Il m’a semblé que le coût de la licence était trop élevé pour le simple affichage d’une carte comportant un point repère.
Si vous avez besoin de plus de fonctionnalités je recommande vivement, LeafLet Maps Marker d’autant que le support est très réactif.
J’ai donc opté pour l’extension qui offrait juste ce dont j’avais besoin : OSM – OpenStreetMap.
Réglages de base de l’extension OSM – OpenStreetMap
On commence par installer OSM – OpenStreetMap à partir de l’administration du site WordPress : Extensions > Ajouter puis « Installer » et « activer ».
Une fois installée, OSM offre une interface de réglages basiques, à laquelle on accède à partir de la colonne de gauche : Réglages > OSM.

Les réglages permettent de définir les coordonnées (latitude, longitude) qui serviront de centre à la carte par défaut ainsi que son niveau de zoom.
Umap peut vous aider à trouver les coordonnées.
Comment créer une carte avec OSM ?
Pour construire une carte, ouvrez une page ou un article en mode édition standard, (non Gutenberg). OSM 4.1.2 ne semble pas compatible avec Gutenberg. L’interface de génération du code court ne s’affiche pas correctement.
Ouvrir la page ou l’article avec Elementor ne permet pas d’afficher l’interface d’OSM.
Les réglages du générateur de code court d’OSM apparaissent en bas de page sous la zone de saisie du texte.

L’interface permet de générer un code court (shortcode) que l’on pourra coller dans une zone de texte où vous voudrez afficher la carte.
On commence par créer un Marker (point d’intérêt)

- Sélectionner l’onglet « Create Marker »
- Choisir le numéro du Marker
- Lui donner un nom
- Préciser les informations qui s’afficheront dans un pop-up lié au Marker. (Utilisez <br/> pour un retour à la ligne).
- Choisir l’icône du Marker
- Zoomer / dé-zoomer pour agrandir la carte
- Cliquer à l’endroit ou le Marker doit pointer
- Enregistrer
Comment créer la carte et son code court (shortcode)

- Sélectionner l’onglet « Map & Marker »
- Choisir le type de carte
- Choisir le numéro du Marker à afficher
- Choisir les options : Fullscreen (icône de plein écran), scaleline (échelle), position de la souris (coordonnées d’un point)
- Cliquer sur le point qui sera la centre de la carte. Cela génère le code court
- Il est possible de modifier manuellement les dimensions de la carte affichée
- Copier le code court.
Comment afficher une carte dans une publication WordPress ?
Une fois le code court (shortcode) copié depuis le bas de l’interface de génération de code court, il ne vous reste plus qu’à le copier dans une zone de texte.Voici un exemple de code court :

Ci-dessous le même code court interprété par l’extension OSM.
La carte s’affiche aux dimensions spécifiées dans le code
Cliquez sur l’icône pour voir apparaître la notice avec le texte saisi au point 4 de la création du Marker.
Et voilà !
Les icône par défaut d’OSM ne sont pas très jolies. Dans un prochain article je vous expliquerai comment utiliser une icône personnalisée.
Merci pour cet article ! Très bien expliqué 🙂
En réponse à Caroline.
Bonjour Caroline,
Avec plaisir comme on dit à Toulouse.
Si vous avez des questions n’hésitez pas.
Bonne journée,
Merci pour ce tuto, mes étudiants sont ravis (et moi aussi) pour vos explications
Merci Jean-Luc,
Les étudiants de quelle école ?
Bonne journée,
BTS NDRC à Montreuil
Bonjour,
J’utilise openstreetmap WordPress. Je veux que si je clique sur l’icône d’un pays qu’il me dirige sur une nouvelle page de mon site.
Avez-vous la solution ?
Bonjour,
Comme indiqué dans l’article, pour bénéficier de fonctionnalités avancées je ne saurais trop vous conseiller de passer à Leaflet Maps Marker.
Bonne journée
Bonjour,
J’ai installé le plugin OSM dans WordPress, mais je ne vois pas d’onglet Marker.
Je n’ai pas compris non plus comment activer la recheche d’itinéraires vers l’adresse choisie.
Merci
Bonjour,
La zone de configuration d’une carte se trouve au bas des pages et des articles avec l’intitulé « WP OSM Plugin shortcode Generator ». C’est indiqué dans l’article : « Les réglages du générateur de code court d’OSM apparaissent en bas de page sous la zone de saisie du texte. »
Pour bénéficier de fonctionnalités avancées je vous conseille de passer à Leaflet Maps Marker.
Bonne journée
Merci pour votre retour mais dans les différents onglets de génération de carte, je ne vois pas ce qui permet d’activer l’affichage de recherche d’itinéraires sur la carte affichée.
J’ai également été consulté la page « shortcode arguments » (https://wp-osm-plugin.hanblog.net/shortcode-arguments/) et n’ai rien trouvé en ce sens.
J’ai aussi installé et testé Mapmarker. On peut lancer une recherche d’itinéraire avec ce plugin. Mais je ne comprends pas pourquoi, dans ce cas-là, on bascule sur Google et qu’on ne continue pas avec OpenStreetMap.
Cordialement
Bonjour,
Le plus efficace serait de poser ces questions sur le support des extensions en question.
Bonne journée,
Bonjour,
Dans le cadre d’un import d’un fichier CSV, est-ce que OSM gère cela pour éviter de réécrire de nombreuses informations ?
Est-ce une option de ce plugin ?
A vous lire,
Bien cordialement (Un Tarnais 😉 )
Bonjour Pascal,
Pour ce genre de fonctionnalité, je ne peux que vous conseiller d’essayer Leaflet Maps Marker.
Il est possible que la version gratuite permette l’import CSV.
Bien « Voisinement » 😉
Bonjour,
Ce tuto me permettra-t-il de remplacer Google Map dans un annuaire pour géolocaliser les entreprises inscrites ?
Je crois comprendre qu’il y est expliqué comment créer une carte avec marker.
Merci !
Bonjour,
Le tuto a vocation à expliquer comment remplacer une simple carte Google par une carte OpenStreetMap. Pour des fonctionnalités avancées Leaflet Maps Marker est plus indiqué que le simple affichage d’une carte avec un point de repère.