Comment ajouter une carte OpenStreetMap à WordPress ?

Temps de lecture : 5 minutes

Carte de l’Europe

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 :

Extension OSM Openstreetmap
Extension Leaflet Maps Marker

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.

Interface de réglages d’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.

Osm Generateur Code Court

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)

OSM création d'un marker
  1. Sélectionner l’onglet « Create Marker »
  2. Choisir le numéro du Marker
  3. Lui donner un nom
  4. Préciser les informations qui s’afficheront dans un pop-up lié au Marker. (Utilisez <br/> pour un retour à la ligne).
  5. Choisir l’icône du Marker
  6. Zoomer / dé-zoomer pour agrandir la carte
  7. Cliquer à l’endroit ou le Marker doit pointer
  8. Enregistrer

Comment créer la carte et son code court (shortcode)

OSM créer une carte
  1. Sélectionner l’onglet « Map & Marker »
  2. Choisir le type de carte
  3. Choisir le numéro du Marker à afficher
  4. Choisir les options : Fullscreen (icône de plein écran), scaleline (échelle), position de la souris (coordonnées d’un point)
  5. Cliquer sur le point qui sera la centre de la carte. Cela génère le code court
  6. Il est possible de modifier manuellement les dimensions de la carte affichée
  7. 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 :

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

Cyrille Sanson

Cyrille Sanson

Expert WordPress : conception de sites, audit, maintenance, dépannage, formation

Partager cet article ➡

Partager sur facebook
Partager sur twitter
Partager sur linkedin

Laisser un commentaire

15 réflexions au sujet de “Comment ajouter une carte OpenStreetMap à WordPress ?”

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

    Répondre
  2. 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

    Répondre
    • 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

      Répondre
      • 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

        Répondre
  3. 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 😉 )

    Répondre
  4. 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 !

    Répondre
    • 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.

      Répondre

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Abonnez-vous à ma newsletter