You are currently viewing Comment créer une map de voyageur avec un plugin
Carte de voyage avec des points pout marquer les étapes

Comment créer une map de voyageur avec un plugin

Cet article va plaire aux voyageurs, je vais te montrer comment mettre en évidence toutes les villes que tu as visitées lors de ton dernier voyage, le tout gratuitement. Tu vas pouvoir créer une carte, et tes propres marqueurs.

Je ne souhaite pas utiliser de clé API, nous allons donc utiliser une carte leaflet (open source) : si tu ne comprends pas ce paragraphe, ce n’est pas grave pour la suite de la démo !

Création de ta cartes

Commençons par télécharger le plugin « Travelers’ Map » de Camille Verrier. C’est vrai que le plugin n’a pas beaucoup de téléchargements, mais je vois qui est compatible avec ma version WordPress et il a été mis à jour il n’y a pas si longtemps :

Plugin Traveler's Map
Télécharger le plugin

Une fois que tu as installé et activé le plugin, on va partir d’un exemple pour faire le test. Imagine… C’est peut-être vrai… que tu étais à Cuba pour découvrir La Havane, Cienfuegos et Trinidad.

Tu vas créer une page Cuba, où tu vas donner ton ressenti de ce super mégagénial voyage, et écrire trois articles sur chaque ville que tu as visitée :

  1. La Havane
  2. Cienfuegos
  3. Trinidad

Si Cuba ne t’inspire pas, tu peux prendre un autre pays comme exemple.

Une fois que tu crées cette page et ces trois articles (c’est une démo : pas besoin d’y mettre du texte), reviens ici !

Maintenant que tout ça s’est fait, tu vas aller sur l’onglet « Traveler’s Map » puis cliques « Réglages » sur le menu gauche WordPress :

Réglages du plugin Traveler's Map
Réglages du plugin Traveler's Map

Au niveau de « Activer Travelers’ Map sur : » tu vas cocher « Article » et « Page » si ce n’est pas déjà fait. Cela va permettre de créer une map sur les pages et les articles :

Activer le plugin aux pages et aux articles

N’oublie pas d’enregistrer en fin de page.

Ensuite, nous allons prendre le short code pour dire : « hé, je veux que ma carte soit ici » (sur la page Cuba) :

  1. Au survole : « Travelers’ Map »
  2. Clic sur « Assistant code court »
  3. Copie le code court
Le code court du plugin Traveler's Map
le code court du plugin Travelers' Map

Va sur la page « Cuba » et colle le code court là où tu veux que ta carte apparaisse. Moi je mets le code court sous le titre principal.

Rends-toi maintenant sur l’article « La Havane » de ton éditeur WordPress. En bas de ta page, tu vois une map avec des marqueurs… 

À la zone de la map, indique les choses suivantes :

  1. Le nom de la ville
  2. Choisis ton marqueur
  3. Tu peux écrire le nom de la ville sur cette zone
  4. Choisis une des photos que tu as prises lorsque tu étais à La Havane (de préférence de dimension 300x300px)

Tu peux également choisir le lieu précis avec la « Latitude » et la « Longitude »

Création d'une map avec le plugin Travelers' Map
Création d'une map avec le plugin Travelers' Map

N’oublie pas d’enregistrer !

Puis, répète la même opération sur l’article « Cienfuegos » et « Trinidad ». Bien sûr, tu ne vas pas écrire La Havane, mais pour chaque article sa ville.

Une fois cette opération faite, tu peux aller sur la page « Cuba » de ton site. Une belle map apparaît, avec les marqueurs que tu auras sélectionnés.

En cliquant sur un marqueur, par exemple « La Havane », la photo que tu as choisie auparavant apparaît. Quand tu cliques sur la photo tu seras redirigé vers l’article « La Havane » :

Le rendu du plugin Travelers' sur le site
Le rendu du plugin Travelers' sur le site

Super, non ?

Le lien vers l'article

Tu peux faire le test avec « Cienfuegos » et « Trinidad » sur la page « Cuba ».

Comment rendre tes marqueurs uniques

Comme tu as pu le voir plus haut, j’ai utilisé des marqueurs personnalisés. Je vais te montrer comment on fait cela.

Survol l’onglet : « Traveler’s Map » puis clique « Personnaliser les marqueurs » sur le menu WordPress de ta gauche :

personnaliser les marqueurs de Travelers' Map

En haut de la page, au niveau de « Marqueur » clique sur « Ajouter »

Maintenant, tu vas pouvoir créer ton image :

  1. Donne un nom à ton marqueur
  2. Choisis une icône de préférence de dimension 32x32px en extension « png »
  3. Et clique sur « Publier »
Nommer le marqueur de Travelers' Map
Nommer le marqueur de Travelers' Map

Tu auras maintenant de nouveaux marqueurs pour tes cartes.

Que penses-tu de ce plugin ?  N’hésite pas à donner ton avis.

Si vous avez aimé l'article, vous êtes libre de le partager :-)

Cet article a 2 commentaires

  1. Sophie et Oscar

    Merci pour cet article! Très sympa ces cartes. Mon blog n’a rien à voir avec les voyages mais ce plugin pourrait tout à fait me servir pour créer des cartes pour les livres photos souvenir que nous imprimons après chacun de nos voyages! Merci encore pour l’astuce!

    1. Marc

      Avec plaisir… Très bonne idée, merci de l’avoir partagé

Laisser un commentaire