Vous souhaitez ajouter le localisateur de magasins Google Maps à WordPress? Un localisateur de magasin est une carte qui pointe vers l’emplacement de votre entreprise.
Permet aux utilisateurs de le localiser sur la carte, de trouver un itinéraire ou de partager la position avec des amis. L’ajout d’un localisateur de magasin à votre site Web d’entreprise ou même à une boutique en ligne vous aide à gagner instantanément la confiance des utilisateurs.
Dans cet article, nous vous montrerons comment ajouter facilement le localisateur de magasins Google Maps à WordPress.
Google Maps a introduit une API payante pour afficher les cartes sur les sites Web. Ils offrent toujours une option gratuite limitée pour intégrer Google maps sur de petits sites Web.
La plupart des plugins Google Maps pour WordPress utilisent l’API Google pour récupérer et afficher des cartes. Si vous souhaitez utiliser un plugin Google Maps, vous devrez vous inscrire sur la plate-forme API Google et activer l’option de facturation.
Il s’agit d’un service par répartition, ce qui signifie que vous serez facturé en fonction du nombre d’appels API effectués depuis votre site Web.
Nous vous montrerons les méthodes gratuites et payantes avec leurs avantages et leurs inconvénients, puis vous pourrez choisir celle qui correspond le mieux à vos besoins.
Méthode 1. Ajoutez gratuitement Google Maps à votre site Web
Cette méthode est plus simple et gratuite. L’inconvénient est que vous ne pouvez pas afficher plusieurs magasins sur une seule carte.
Il est recommandé aux utilisateurs qui ne souhaitent ajouter qu’un seul emplacement de magasin Google Maps sur leur site Web.
Tout d’abord, vous devez visiter le site Web de Google Maps sur votre ordinateur. Ensuite, entrez l’adresse de votre magasin dans le champ de recherche et Google Maps l’affichera sur la carte avec un marqueur épinglé sur la carte.
Assurez-vous de placer le marqueur au bon endroit. Vous pouvez sélectionner un niveau de zoom en cliquant sur le bouton de zoom. Une fois que vous êtes satisfait du niveau de zoom, vous devez cliquer sur le bouton Partager dans la colonne de gauche.
Une fenêtre pop-up apparaîtra où vous devrez passer à l’onglet “Intégrer une carte”. Vous verrez maintenant votre position recherchée sur la carte avec un code HTML.
Cliquez sur le lien Copier HTML pour obtenir le code d’intégration.
Rendez-vous maintenant dans la zone d’administration de votre site Web WordPress. Une fois dans la zone d’administration, allez-y et modifiez le message ou la page où vous souhaitez afficher la carte de localisation du magasin.
En règle générale, les utilisateurs ajoutent une carte de localisation du magasin à leur page de formulaire de contact avec leur numéro de téléphone et leurs heures d’ouverture.
Sur l’écran d’édition suivant, vous devez ajouter un bloc HTML personnalisé.
Dans la zone de texte du bloc HTML personnalisé, vous devez coller le code que vous avez copié à partir de Google Maps.
Vous pouvez maintenant basculer vers l’onglet d’aperçu pour voir Google Maps intégré dans votre page. Il affichera l’emplacement de votre magasin marqué sur la carte avec des liens vers des adresses ou pour enregistrer l’emplacement.
Méthode 2. Ajoutez le localisateur de magasins Google Maps à l’aide d’un plugin WordPress
Cette méthode est recommandée pour les utilisateurs qui souhaitent afficher plusieurs emplacements de magasin sur une carte Google.
La première chose à faire est d’installer et d’activer le plugin WP Store Locator. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
Il s’agit d’un plugin Google Maps gratuit qui vous permet de créer une carte personnalisée avec plusieurs emplacements de magasin et des champs personnalisés.
L’inconvénient de cette méthode est qu’elle vous oblige à ajouter une clé API. Vous devrez fournir vos informations de facturation pour utiliser la clé API. Pour les prix et autres informations, visitez le site Web de la plateforme Google Maps.
Terminé, commençons.
Étape 1. Générez des clés d’API Google Maps
Pour utiliser le plugin WP Store Locator, vous devrez générer deux clés API. La première est appelée clé API du navigateur et la seconde est appelée clé serveur.
Commençons par la clé du navigateur en premier. Cliquez sur ce lien dans la console développeur de Google et il vous amènera sur le site Web de l’API Google avec toutes les API nécessaires activées.
Vous devez créer un nouveau projet et lui donner un nom pour vous aider à l’identifier. Après cela, vous devrez attendre quelques instants pendant que la console crée le projet pour vous.
Vous serez ensuite redirigé vers la page de configuration de la clé API. Vous devez fournir un titre pour votre clé API, afin de pouvoir l’identifier facilement en tant que clé API du navigateur pour votre projet Google Maps.
Ensuite, vous devez définir “Restrictions d’application” dans “Références HTTP”. En dessous, vous devez définir le champ “Accepter les demandes de” sur votre nom de domaine au format suivant.
https://example.com/*
https: //*.example.com/* (si vous utilisez un sous-domaine)
Enfin, cliquez sur le bouton “Créer”. La console va maintenant enregistrer vos paramètres et vous montrer la clé du navigateur. Vous devez copier et coller cette clé dans un éditeur de texte, vous en aurez besoin plus tard.
Ensuite, vous devez créer la clé API du serveur. Cliquez sur ce lien dans la console développeur de Google et il vous amènera directement à la console avec les API sélectionnées activées.
Vous verrez à nouveau la page de création de projet. Cependant, puisque vous avez déjà créé un projet, vous pouvez cliquer sur le menu déroulant et sélectionner votre projet.
Ensuite, vous serez redirigé vers la page de configuration de l’API. Donnez un nom à cette clé API pour vous aider à la reconnaître comme clé de serveur.
Dans la section “Restrictions d’application”, vous devez sélectionner les adresses IP. Fondamentalement, nous demandons à Google d’accepter uniquement les demandes de serveur provenant d’adresses IP spécifiques.
Vous devez maintenant demander à votre hébergeur WordPress de vous indiquer la plage IP utilisée par votre compte d’hébergement. Ce serait dans le format suivant:
172.16.0.0/12
Après cela, vous devez cliquer sur le bouton “Créer” pour enregistrer vos paramètres et copier la clé API depuis le serveur.
Étape 2. Configurer le plugin WP Store Locator
Une fois que vous avez créé vos clés API, vous devez vous rendre sur Localisateur de magasins »Paramètres page pour configurer le plugin.
Entrez le navigateur Google Maps et les clés API du serveur que vous avez généré précédemment. Ensuite, sélectionnez la langue et la région de Maps, puis cliquez sur le bouton Enregistrer les modifications pour enregistrer vos paramètres.
Maintenant, vous devez faire défiler la page des paramètres jusqu’à la section “Carte” et entrer un point de départ pour la carte. Ce point de départ peut être une ville ou un pays, afin que les utilisateurs puissent voir les signets situés à différents endroits.
Il existe de nombreuses autres options sur la page des paramètres, notamment le style de carte, le niveau de zoom par défaut, le type de carte, le rayon de recherche, le pays, etc. Vous pouvez les consulter et les adapter à vos besoins.
Une fois que vous avez terminé, il est temps d’ajouter des emplacements.
Étape 3. Ajouter des emplacements de magasin
Se diriger vers Localisateur de magasins »Nouveau magasin pour ajouter votre premier emplacement. La page New Store ressemblera à l’éditeur de publication ou de page par défaut dans WordPress.
Donnez un titre à votre magasin, puis faites défiler la page jusqu’à la section “Détails du magasin”. À partir d’ici, vous devez entrer l’adresse de votre magasin.
Vous verrez une carte dans la colonne de droite, mais elle ne se mettra pas automatiquement à jour à l’adresse que vous avez entrée. Vous devrez cliquer sur le bouton Publier pour enregistrer votre position. Après cela, actualisez la page et la carte pointera vers l’adresse que vous avez fournie.
Répétez maintenant le processus pour ajouter d’autres emplacements de magasin. Vous pouvez ajouter autant de magasins que vous le souhaitez.
Étape 4. Ajoutez la carte du localisateur de magasin dans WordPress
Pour afficher votre localisateur de magasin sur une page WordPress, créez simplement une nouvelle page ou modifiez une page existante où vous souhaitez afficher la carte.
Sur l’écran d’édition de publication, vous devez ajouter le bloc “Code court” à votre zone d’édition de publication. Après cela, ajoutez le [wpls] shortcode à l’intérieur.
Vous pouvez maintenant enregistrer ou publier votre page et cliquer sur le bouton d’aperçu pour voir le localisateur de magasins Google Maps en action.
Il affichera vos marqueurs de carte pour chaque emplacement de magasin et démarrera la carte à partir de votre point de départ préféré. Par exemple, sur cette carte, il se concentre sur la ville de West Palm Beach et affiche deux emplacements de magasins sur la carte.
C’est tout ce que nous espérons que cet article vous a aidé à apprendre à ajouter le localisateur de magasins Google Maps à WordPress. Vous pouvez également consulter notre liste d’outils Google gratuits que chaque propriétaire de site doit utiliser.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour regarder des vidéos de didacticiel WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
