Voulez-vous ajouter le localisateur de magasin Google Maps dans WordPress ? Un localisateur de magasin est une carte indiquant l’emplacement de votre entreprise.
Il permet aux utilisateurs de vous localiser sur la carte, de trouver des itinéraires ou de partager l’emplacement 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 allons vous montrer comment ajouter facilement un localisateur de magasin Google Maps dans WordPress.
Google Maps a introduit une API payante pour afficher des cartes sur des sites Web. Ils offrent toujours une option gratuite limitée pour intégrer des cartes Google 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 à la plate-forme Google API et activer l’option de facturation.
Il s’agit d’un service de paiement au fur et à mesure, ce qui signifie que vous serez facturé en fonction du nombre d’appels d’API effectués à partir de 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 convient le mieux à vos besoins.
Méthode 1. Ajout gratuit de 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 souhaitent simplement ajouter un seul emplacement de magasin Google Maps sur leur site Web.
Tout d’abord, vous devez visiter le Google Maps site Web 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 que le marqueur est placé 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.
Cela fera apparaître une fenêtre contextuelle dans laquelle vous devrez passer à l’onglet « Intégrer une carte ». Vous verrez maintenant votre emplacement recherché 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, continuez et modifiez la publication ou la page sur laquelle vous souhaitez afficher la carte de localisation du magasin.
Normalement, les utilisateurs ajoutent une carte de localisation du magasin sur leur page de formulaire de contact avec leur numéro de téléphone et leurs heures d’ouverture.
Sur l’écran d’édition de publication, 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 passer à l’onglet Aperçu pour voir Google Maps intégré à votre page. Il affichera l’emplacement de votre magasin marqué sur la carte avec des liens vers les directions ou pour enregistrer l’emplacement.
Méthode 2. Ajouter Google Maps Store Locator à l’aide d’un plugin WordPress
Cette méthode est recommandée pour les utilisateurs qui souhaitent afficher plusieurs emplacements de magasins sur une carte Google.
La première chose que vous devez faire est d’installer et d’activer le Localisateur de magasin WP brancher. 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 nécessite l’ajout d’une clé API. Vous devrez fournir vos informations de facturation pour utiliser la clé API. Pour les prix et autres informations, veuillez consulter le Plateforme Google Maps site Internet.
Prêt, commençons.
Étape 1. Génération des clés API Google Maps
Pour utiliser le plugin WP Store Locator, vous devrez générer deux clés API. La première s’appelle la clé de l’API du navigateur et la seconde s’appelle la clé du serveur.
Commençons d’abord par la touche Navigateur. Cliquez dessus Console de développement Google lien et il vous mènera au site Web de l’API Google avec toutes les API requises activées.
Vous devez créer un nouveau projet et lui donner un nom qui vous aide à identifier le projet. Après cela, vous devrez attendre quelques instants pendant que la console crée le projet pour vous.
Ensuite, vous serez redirigé vers la page de configuration de la clé API. Vous devez fournir un titre pour votre clé API, afin que vous puissiez facilement l’identifier comme la clé API du navigateur pour votre projet Google Maps.
Ensuite, vous devez définir « Restrictions d’application » sur « Référents HTTP ». En dessous, vous devez définir le champ « Accepter les demandes de » sur votre nom de domaine au format suivant.
https://exemple.com/*
https://*.example.com/* (si vous utilisez un sous-domaine)
Enfin, cliquez sur le bouton ‘Créer’. La console enregistrera maintenant vos paramètres et vous montrera 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 dessus Console de développement Google lien et il vous mè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 simplement cliquer sur le menu déroulant et sélectionner votre projet.
Vous serez alors redirigé vers la page de configuration de l’API. Fournissez un nom pour cette clé API qui vous aide à la reconnaître en tant que 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 fournisseur d’hébergement WordPress de vous indiquer la plage d’adresses IP utilisée par votre compte d’hébergement. Ce serait au 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 du serveur.
Étape 2. Configuration du plugin WP Store Locator
Une fois que vous avez créé vos clés API, vous devez vous diriger vers Localisateur de magasin » Paramètres page pour configurer le plugin.
Saisissez les clés API du navigateur et du serveur Google Maps que vous avez générées 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 de la carte. Ce point de départ peut être une ville ou un pays, afin que les utilisateurs puissent voir des marqueurs placé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 ajuster selon vos besoins.
Une fois que vous avez terminé, il est temps d’ajouter des emplacements.
Étape 3. Ajouter des emplacements de magasin
Dirigez-vous vers Localisateur de magasin » Nouveau magasin page pour ajouter votre premier emplacement. La page Nouveau magasin ressemblera à l’éditeur de publication ou de page par défaut dans WordPress.
Donnez un titre à votre boutique, puis faites défiler jusqu’à la section « Détails de la boutique ». À partir de là, vous devez entrer l’adresse de votre magasin.
Vous verrez une carte dans la colonne de droite, mais elle ne sera pas automatiquement mise à 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 points de vente que vous le souhaitez.
Étape 4. Ajout de la carte de localisation des magasins dans WordPress
Pour afficher votre localisateur de magasin sur une page WordPress, créez simplement une nouvelle page ou modifiez une page existante sur laquelle vous souhaitez afficher la carte.
Sur l’écran d’édition de publication, vous devez ajouter le bloc « Shortcode » à votre zone d’édition de publication. Après cela, ajoutez le [wpsl] shortcode à l’intérieur.
Vous pouvez maintenant enregistrer ou publier votre page et cliquer sur le bouton Aperçu pour voir le localisateur de magasin 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 comment ajouter un localisateur de magasin Google Maps dans WordPress. Vous pouvez également consulter notre liste d’outils Google gratuits que tout propriétaire de site devrait utiliser.
