Comment ajouter une carte OpenStreetMap à WordPress ?

Temps de lecture : 5 minutes

Carte de l’Europe
Partager sur LinkedIn
Partager sur Twitter
Partager sur Facebook

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.

Depuis 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 avec peu de visites. En effet le seuil de la tarification commence à 28 000 affichages par mois. Mais qui sait de quoi demain sera fait ? De plus, Google demande maintenant, pour utiliser une carte, de posséder un compte et d’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 vous voilez pas la face : en réalité rien n’est gratuit. Comme les hébergeur de vidéos (YouTube, Viméo…) Google Maps espionne 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 libre : OpenStreetMap. Le service est de bonne qualité, facile à mettre en œuvre et de par ses principes fondateurs ne piste pas ses 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 posait des problèmes d’affichage avec Elementor. La carte ne s’affichait que 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). Elle n’a, en effet, 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.

Abonnez-vous à ma newsletter

Partagez cet article

Poster un Commentaire

avatar

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

  S’abonner  
Notifier de