Voyagez-vous souvent ? Car si vous ne le savez pas encore, WordPress est également très utilisé par les blogueurs passionnés de voyage. Avec ce dernier, ils peuvent partager leurs photos et les moments exceptionnels qu’ils ont eu à vivre avec d’autres personnes.
Alors, pour vous qui aimez partager les lieux que vous visitez, ne pensez-vous pas qu’il serait bien d’ajouter une carte de voyage interactive qui affichera les différents endroits où vous êtes allés ?
Si cette idée vous enchante comme moi, alors sachez que vous apprendrez dans ce tutoriel à intégrer une carte interactive sur votre blog WordPress.
Comment installer et configurer le plugin Nomad World Map
La première chose à faire est d’installer et d’activer le plugin Nomad World Map (il porte bien son nom) disponible sur WordPress.org depuis votre tableau de bord. Vous pouvez également télécharger le plugin sous forme de fichier zip.
Après l’installation et l’activation du plugin, un nouveau menu « Nomad Map » s’ajoutera au tableau de bord (tout en bas à gauche). Cliquez sur son sous-menu settings, car nous procéderons à sa configuration.
Les configurations par défaut sont suffisantes. Je vous expliquerai toutes fois quelques options.
Dans la section « General »
Il est possible d’activer un tracé entre les lieux visités. L’option qui suit « Draw curved lines on the map » vous permet de tracer des lignes courbées sur la carte.
« On pageload zoom to », vous donne la possibilité de mettre l’accent sur un lieu lorsque la page se charge. Vous avez le choix entre le premier lieu ou le dernier lieu.
« Zoom level » permet d’ajuster le zoom effectué sur la carte.
« Map type » vous permet de choisir le type de carte
L’option « Past route color » est la couleur d’un chemin emprunté et « Future route color » est la couleur des routes futures (pour les voyages programmés).
La section « Content Option »
Avec l’option « show post thumbnails in a circle », vous pouvez afficher l’image à la une d’un article dans une bulle. L’option « Show the location content in the » vous permet d’afficher les détails du lieu dans un slider ou une info-bulle.
Comment ajouter un nouveau lieu à la carte
Cliquez sur le bouton « Route Editor ». Sur cette nouvelle page, nous allons commencer par ajouter le nom du lieu, par exemple « Prague », ce qui va afficher un pointeur sur la carte à l'emplacement spécifié. Cliquez ensuite sur « Set ».
L’option « Location content » vous permet de choisir un article qui sera lié à ce lieu. Vous pouvez en outre ajouter un contenu directement en choisissant « Custom content ».
Pour attacher le lieu à un article, laissez l’option « Post Excerpt » activez et cliquez sur « Search » sur le champ suivant pour effectuer une recherche, juste après avoir spécifié le titre de l’article (et non des termes de recherche).
Vous pouvez ensuite modifier l’image à la une, spécifiez les heures de départ et d’arrivé au lieu, et une fois que c’est fait, cliquez sur « Save » tout en bas à gauche.
Après avoir cliqué sur « Save », vous pourrez répéter le processus, pour ajouter les différents lieux où vous êtes allés.
Comment ajouter plusieurs cartes de voyage
Il vous suffit d’accéder au menu « Manage Maps » du plugin et de cliquer sur « Add new map ». Une fenêtre s’ouvrira, vous devrez enregistrer le nom de la carte, exemple : « Voyage Spécial 2014 ».
Cliquez ensuite sur le nom de cette carte pour ajouter des lieux, comme il a été présenté plutôt.
Vous pouvez également accéder à une carte en choisissant cette dernière dans la liste des cartes disponibles.
Comment afficher une carte dans une page/article
Il vous suffit de récupérer l’identifiant d’une carte et de l’intégrer comme paramètre au shortcode qui suit :
[mwm_map]
De sorte à avoir des shortcodes identiques à ceci : [mwm _map id= »2″] ou [mwm _map id= »10″]
Pour récupérer l’identifiant d’une carte, revenez sur la page « Manage Maps » du plugin et copiez le chiffre correspondant à la carte de votre choix sur la colonne « ID ».
Utilisez ce shortcode dans un article/page et consultez ce dernier afin de voir comment se comporte le plugin.
C’est tout pour ce tutoriel sur la création d’une carte interactive de voyage sur WordPress. N’hésitez pas à partager l’astuce avec vos amis sur les réseaux sociaux.
Bonjour, Petite question, comment on choisit la zone de la carte a afficher? Je veux faire une carte de la Nouvelle Zelande mais quand on ouvre la page avec la carte le zoom est fait sur la France…
Bonsoir,
Essayez d’utiliser la nouvelle Zélande lors de la création de la carte. Résidez-vous en france ?
Bonjour,
J’ai essayé Nomad Maps mais le plugin ne semble plus être mis à jour et je ne trouve pas l’interface très claire et intuitive.
J’ai trouvé un autre plugin qui me semble plus adapté: https://wordpress.org/plugins/travelmap-blog
On peut lier des photos et articles à la carte.
Bonjour,
Merci pour le partage.
Bonjour,
J’ai trouvé l’origine du problème, j’avais copié une clé Google API Browser Key fausse.
Bonne journée 🙂
Sonia
Merci pour le retour Sonia
Bonjour,
Je suis novice sur wordpress, idem que pour Idem, j’ai un message d’erreur qui apparaît sur la carte : » Petit problème… Une erreur s’est produite
Google Maps ne s’est pas chargé correctement sur cette page. Pour plus d’informations techniques sur cette erreur, veuillez consulter la console JavaScript. »
J’ai tenté de changer de thème comme conseillé mais cela ne résout pas mon problème, pouvez-vous m’aider svp ?
Vous remerciant par avance !
Bonne journée,
Sonia,
Bonjour,
je n’ai pas SEO >> Titres & Métas …
J’ai seulement le tableau de bord et Search Console. ESt-ce parce que je n’ai pas la version premium payante ??
Bonjour,
je suis débutant, et je consulte votre blog…
il semble qu’il y a une erreur de syntaxe sur le shortcode qui devrait être [nwm_map id= »1″] , et non [mwm _map id=’1’]
J’ai pas mal galéré avant de voir ça.
Bonne journée
Bonsoir,
Merci pour la correction. C’est très apprécié.
Bonsoir,
Merci pour votre tutoriel.
J’ai essayé de suivre votre méthodologie afin d’intégrer une carte dans une PAGE (WordPress), cependant je n’obtiens pas le résultat attendu.
Dans la partie TEXTE (et non visuel), je rentre le shortcode suivant :
[mwm _map id=’2’]
Lorsque je prévisualise ma page, je n’ai pas la carte qui s’affiche mais le texte « [mwm _map id=’2’] ».
Pourriez-vous m’aider svp ?
Je vous remercie.
Bonsoir,
pouvez-vous partager une capture d’écran ?
Bonjour,
Merci de votre retour. Comment puis-je vous partager un screenshot ?
Il ne me semble pas pouvoir insérer une image ni un fichier joint.
Vous pouvez héberger votre capture d’écran sur des sites spécialisés puis publier le lien ici. Ou alors vous pouvez le mettre dans vos medias et me donner le lien.
Bonjour,
Merci pour votre aide.
Ci-dessous le lien des screenshot du la page avec le texte sous wordpress et ce que j’obtiens.
http://www.zimagez.com/zimage/wordpress15.php
http://www.zimagez.com/zimage/blog899.php
Bonne journée
Bonsoir, désolé pour la réponse tardive,
essayez d’activer un autre thème pour voir.
Bonjour,
J’ai installé le plugin mais j’ai problème :
Dans « nomad map », la carte ne s’affiche pas ! je ne peux donc rien paramétrer.
Voilà cequi s’affiche : « Petit problème… Une erreur s’est produite
Google Maps ne s’est pas chargé correctement sur cette page. Pour plus d’informations techniques sur cette erreur, veuillez consulter la console JavaScript. »
Je ne sais pas modifier la console javascript et surtout je ne vois pas ce qu’il faut faire!
Merci de votre aide
Bonjour,
La console javascript permet de découvrir ce qui est à l’origine du problème. Avez-vous suivi le tutoriel ? Si tel est le cas, alors j’aurai besoin d’avoir une capture de votre console javascript. Pour cela, vous devez appuyer sur F12 (sur Chrome), sur la zone qui s’affiche, recherchez l’onglet « console », puis faite une capture. Il existe plusieurs outils qui vous permettront de faire des captures. Une fois que vous aurez la capture de votre console javascript, je pourrai vous aider.
Merci pour ce tuto ! Savez-vous s’il est possible d’insérer la carte dans un slider ?
Merci
Bonsoir,
Je n’ai pas encore testé mais ça doit certainement être possible.
Bonjour,
Tout ce qu’il vous suffit de faire c’est de rechercher un slider qui prend en charge les shortcodes.
Faites votre choix dans cette liste https://fr.wordpress.org/plugins/tags/slider-shortcode
Bonjour,
Je n’arrive pas à insérer la carte sur mon site. J’ai inséré [mwm _map id=’1′] puis [nwm _map id=’1′] (à la suite de la lecture des commentaires) sur une de mes pages mais dans l’aperçu il n’y a que le shortcode qui s’affiche. Que puis-je faire?
Merci
Bonjour,
Essayez de l’ajouter dans la section « texte » (non « visuel ») de vos editeur de texte. ça devrait marcher.
bonjour
je n’arrive pas a sélectionner l’article dans lequel je veux mettre la carte, cela me met : No blog post found, please try again. avez vous une idée pour résoudre mon problème ?
merci d’avance
Avez-vous essayé d’en sélectionner un autre?
Bonsoir
j’ai fini par réussir en faisant un copier/coller du titre, la saisie manuelle ne fonctionnant pour aucun des articles
cependant je cale à nouveau avec le short code, je débute désolé… j’ai inséré [mwm_map id=’1′] en tout début de mon article (partie saisie TEXTE et non VISUEL de wordpress) mais dans l’apercu aucune carte juste le short code …
je suis vraiment pas douée
:-(((
Copie et colle le shortcode à partir de la zone « Texte » et non « Visuel »
Bonjour,
Vous n’avez pas besoin de sélectionner un article, il vous suffit d’ajouter le shortcode [mwm_map]. Lisez attentivement la section « Comment afficher une carte dans une page/article ».
Si le problème persiste contactez-nous à nouveau
j’ai trouvé le problème dans votre tuto le short code est mwm alors que dans la FAQ c’est nwm
voilà
Bonjour,
Vous avez raison, voila qui prouve que vous êtes vigilant. Nous allons aussitôt corriger le shortcode.