Comment ajouter des cartes interactives à votre site WordPress?

Vous souhaitez intégrer des cartes interactives à un site WordPress, mais n’est pas certains comment procéder?

Certes, les cartes en ligne sont assez simples. Si vous utilisez un service tel que Google Maps, il vous suffit de choisir un emplacement et d’intégrer la carte sur votre site Web.

Cependant, vous ne pouvez pas modifier des cartes régulières à la volée, et vos collègues non plus – ce qui est souvent nécessaire pour les projets collaboratifs.

C’est là qu’interviennent les cartes interactives. Elles vous permettent de placer des marqueurs mobiles que tout le monde dans votre équipe peut modifier.

Dans cet article, nous parlerons de quand ce type de carte est utile. De plus, nous vous apprendrons deux façons de les ajouter à WordPress.

Que sont les cartes interactives?

L’ajout d’une carte à un site web n’a rien de bien compliqué. Des outils tels que Google Maps ou des plugins WordPress vous permettent d’intégrer des cartes à vos pages en quelques minutes.

Les visiteurs pourront alors naviguer sur les cartes, contrôler le niveau de zoom, et bien plus encore. Ces cartes sont plus interactives que de simples images. Elles ne vous permettent toutefois pas d’apporter des modifications après leur intégration à votre site web.

Pour ce faire, il faut vous tourner vers les cartes interactives. Celles-ci vous permettent d’ajouter de nouveaux marqueurs, des icônes, du texte et plus encore.

Vous pouvez également utiliser une carte interactive pour permettre à vos utilisateurs de partager leurs emplacements. Elles peut aussi les aides à se diriger de là où ils sont, vers leur destination.

Il s’agit généralement d’applications plutôt spécialisées. Les cartes interactives peuvent malgré tout être utiles dans une grande variété de situations. De plus, elles ne sont pas plus difficiles à ajouter que des cartes statiques.

2 façons d’ajouter des cartes interactives à votre site WordPress

Vous pouvez intégrer des cartes interactives dans votre site WordPress de diverses façons. Vous pouvez notamment utiliser un plugin ou divers outils en ligne pour vous aider à le faire.

L’approche du plugin est généralement plus simple. Il faut toutefois noter que les plugins contiennent souvent beaucoup plus de fonctionnalités, y compris certaines dont vous n’avez peut-être pas besoin.

Nous passerons donc d’abord en revue un outil proposé par Google pour vous présenter son fonctionnement.

Nous aborderons ensuite la manière de procéder un utilisant un plugin. Dans le cadre de cet article, nous utiliserons l’extension Maps Marker Pro. Il existe toutefois plusieurs autres excellents choix d’extensions de cartes interactives parmi lesquels choisir.

1. Ajouter des cartes interactives à un site WordPress via la fonction intégrée de Google Map

Google Maps n’a plus besoin de présentation. Ce service gratuit vous permet bien sûr d’extraire des cartes du monde entier. Vous pouvez ainsi partager des lieux avec d’autres personnes, trouver des adresses et même partager l’emplacement où vous êtes.

Les sites Web peuvent aussi intégrer Google Maps à leurs pages de multiples façons. La plupart des cartes offrent toutefois une interactivité limitée. Elles vous permettent de naviguer dessus, contrôler le zoom et changer de vue. C’est généralement tout.

Google Maps offre pourtant de nombreuses autres fonctionnalités, en plus de la simple cartographie. Vous pouvez notamment ajouter des marqueurs, mesurer des distances et inclure des directions à vos cartes.

Utilisez la fonction de personnalisation Google My Maps.

Pour essayer accéder aux autres fonctions de Google My Maps, accéder à tout d’abord l’outil principal. Cliquez ensuite sur le bouton Créer une carte pour débuter le processus de création.

Sur l’écran suivant, définissez un titre pour votre carte et sa première couche. Il s’agit de la base sur laquelle vous allez construire votre carte.

Trouvez maintenant l’emplacement que vous souhaitez partager. Pour ce faire, vous pouvez utiliser la barre de recherche de Google Map en haut de l’écran.

En effectuant un zoom avant, vous pouvez utiliser le symbole de marqueur en haut de l’écran pour mettre en évidence divers emplacements sur votre carte.

Pour ce faire, cliquez à l’endroit où vous souhaitez placer votre marqueur. Définissez ensuite un nom et une icône pour celui-ci.

Une fois que vous avez plusieurs repères mis en place, d’autre options s’offrent à vous. Vous pouvez alors tracer des lignes entre eux pour montrer les distances les séparant.

Rendez vos cartes publiques

Lorsque votre carte est prête, cliquez sur le bouton bouton Partager du menu de gauche. Modifiez maintenant les paramètres pour déterminer qui y a accès, passant son statut de privé à public :

Vous pouvez également inviter d’autres utilisateurs via -email afin qu’ils puissent également modifier votre carte personnalisée.

Ajoutez vos cartes interactives à votre site WordPress

Vus devez maintenant intégrer votre nouvelle carte sur votre site web. Vous pouvez le faire en cliquant sur l’icône des trois points à côté du titre de votre carte.

Sélectionner ensuite sur l’option Intégrer à mon site. Vous aurez alors accès à un code d’intégration pour ajouter la carte.

Vous pouvez maintenant copier et coller le code pour l’incorporer sur n’importe quelle page en utilisant un bloc ou un widget de code.

Votre nouvelle carte interactive personnalisée s’affichera alors à l’emplacement désigné sur votre site web.

2. Utilisez le plugin Maps Marker Pro

Le plugin spécialisé Maps Marker Pro est une solution premium permettant d’inclure des cartes dans WordPress.

Il comprend une gamme très complète de dizaines de fonctionnalités avancées. Celles-ci incluent la possibilité d’extraire des cartes de plusieurs services, d’ajouter un nombre pratiquement illimité de marqueurs à vos cartes et de les organiser.

Les visiteurs peuvent aussi choisir d’utiliser des filtres pour choisir les types de marqueurs qu’ils veulent voir sur vos cartes. Vous pouvez même inclure les distance et les itinéraire entre les marqueurs.

Maps Marker Pro permet aussi de partager votre propre emplacement en temps réel via la carte de votre site web si vous le désirez.

La configuration du plugin peut prendre un peu de temps. Cela est dû à la richesse des fonctionnalités qu’il propose. Son utilisation demeure toutefois assez simple.

Configurer et personnaliser vos cartes avec Maps Marker Pro

Pour commencer, installez et activez le plugin comme vous le feriez avec n’importe quel autre. Vous devrez ensuite ajouter une nouvelle carte ou un nouveau calque, à partir de l’onglet Maps Marker Pro > Add new layer.

Définissez ensuite un nom pour votre calque. Vous pouvez maintenant entrer l’emplacement que vous souhaitez qu’il affiche sur votre carte en ligne.

Vous pouvez aussi configurer la taille et le niveau de zoom que vous souhaitez définir par défaut. Pour ce faire, il vous suffit simplement d’utiliser le menu latéral gauche.

Il existe également une option appelée clustering de marqueurs. Celle-ci affiche une icône avec le nombre de marqueurs dans une zone si vous effectuez un zoom trop éloigné.

L’option Afficher la liste des marqueurs sous la carte peut aussi être très utile. Elle permet d’inclure des informations supplémentaires pour vos marqueurs.

Faites maintenant défiler vers le bas et recherchez l’option qui indique Ajouter un nouveau marqueur à ce calque. Vous pourrez alors définir un nom et un emplacement pour votre marqueur, en utilisant la même carte.

Personnalisez et configurez vos marqueurs

Vous pouvez également choisir une icône et définir un texte contextuel pour votre marqueur. Ceux-ci apparaîtront lorsque les utilisateurs cliqueront sur le marqueur, ou le sélectionneront dans une liste.

Dans tous les cas, n’oubliez pas d’appuyer sur le bouton Publier lorsque vous avez terminé. La carte sera alors accessible au public et pourra être utilisée.

Intégrez vos cartes interactives à votre site WordPress

Pour ajouter votre nouvelle carte interactive vos pages, vous devrez utiliser un segment de code de programmation.

Pour obtenir ce code, revenez à l’onglet Modifier le calque. L’ID correspondant à la carte est visible en haut de celui-ci.

Insérez ensuite le code court [mapsmarker layer=”IDdevotrecalque”] dans la publication ou la page ou vous souhaitez ajouter la carte. N’oubliez pas de remplacer notre exemple en italique par le véritable ID de votre calque au préalable.

Votre carte devrait maintenant s’affichée sur votre site Web! Vous pouvez toujours la modifier et ajouter de nouveaux marqueurs à tout moment. Et ce, sans même devoir quitter votre tableau de bord.

Pour conclure sur comment ajouter des cartes interactives à un site WordPress

Des cartes interactives peuvent transmettre davantage d’informations que leurs contreparties statiques. Elles permettent aussi de personnaliser et d’enrichir les données présentées aux visiteurs.

Ajouter des cartes interactives à un site WordPress n’a rien de bien compliqué. Cela peut pourtant permettre de contribuer au succès de votre site, en améliorant l’expérience utilisateur.

Nous espérons que cet article vous a plu et vous a aidé à ajouter des cartes interactives à votre site WordPress. Si c’est le cas, nous vous invitons à consulter nos autres articles et tutoriels.

Vous y trouverez plusieurs articles concernant WordPress, dont notre guide complet pour l’utilisation de plugins.

Notre base de connaissance contient aussi sans doute des réponses à toutes vos questions en liens avec vos projets web.

Si vous êtes à la recherche d’un hébergement web pour votre site WordPress, nous vous invitons à consulter les offres d’Ex2. Nos plans d’hébergement WordPress vert sont très complètes et performantes, incluant tout ce dont votre site a besoin pour réussir.