Voulez-vous ajouter le localisateur de magasin Google Maps dans WordPress ? Un localisateur de magasin est une carte pointant vers 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 au site Web de votre 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 le localisateur de magasin Google Maps dans WordPress.

Comment ajouter 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 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 plug-in Google Maps, vous devrez vous inscrire auprès de la plate-forme API Google et activer l'option de facturation.

Il s'agit d'un service payant, 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. Ajouter 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 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.

Partager une carte dans Google Maps

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 de partage dans la colonne de gauche.

Cela fera apparaître une fenêtre contextuelle dans laquelle vous devrez basculer vers l'onglet “Intégrer une carte”. Vous verrez maintenant votre emplacement recherché sur la carte avec un code HTML.

Copiez le code d'intégration de Google Maps

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 où vous souhaitez afficher la carte de localisation du magasin.

Normalement, les utilisateurs ajoutent une carte de localisation des magasins sur leur page de formulaire de contact avec leur numéro de téléphone et leurs heures d'ouverture.

Sur l'écran de post-édition, vous devez ajouter un bloc HTML personnalisé.

Ajouter un bloc HTML personnalisé dans WordPress

Dans la zone de texte du bloc HTML personnalisé, vous devez coller le code que vous avez copié à partir de Google Maps.

Les cartes intègrent le code dans WordPress

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.

Emplacement du magasin marqué sur la carte

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 magasin 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 magasins 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é 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éveloppeur Google lien et il vous amènera au site Web de l'API Google avec toutes les API requises activées.

Créer un nouveau projet

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 de pouvoir l'identifier facilement en tant que clé API du navigateur pour votre projet Google Maps.

Paramètres de la clé API du navigateur

Ensuite, vous devez définir ‘Application Restrictions' sur ‘HTTP Referrers'. Ci-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 va maintenant enregistrer vos paramètres et vous montrer la touche du navigateur. Vous devez copier et coller cette clé dans un éditeur de texte, vous en aurez besoin plus tard.

Copier la clé API du navigateur

Ensuite, vous devez créer la clé API du serveur. Cliquez dessus Console de développeur Google lien 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 simplement cliquer sur le menu déroulant et sélectionner votre projet.

Sélectionnez votre projet Google Maps

Vous serez alors redirigé vers la page de configuration de l'API. Donnez un nom à cette clé d'API qui vous aide à la reconnaître en tant que clé de serveur.

Définir des restrictions IP

Dans la section “Restrictions d'application”, vous devez sélectionner les adresses IP. Fondamentalement, nous disons à Google de n'accepter que 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.

Entrez les clés Google Maps

Entrez 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 les marqueurs placés à différents endroits.

Ajouter un point de départ pour votre carte de localisation de magasins

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 à 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.

Adresse du magasin

Fournissez un titre pour votre boutique, puis faites défiler jusqu'à la section “Détails de la boutique”. 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 saisie. Vous devrez cliquer sur le bouton Publier pour enregistrer votre emplacement. 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. 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-en une 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.

Code abrégé du localisateur de magasin

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.

Aperçu de la carte de localisation des magasins

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 chaque propriétaire de site devrait utiliser.

Si cet article vous a plu, abonnez-vous à notre Chaîne Youtube pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.