Comment ajouter facilement une recherche de localisation à un site Web d'annuaire dans WordPress

Il existe de nombreuses façons d'améliorer votre site Web d'annuaire et l'une d'entre elles consiste à activer la recherche basée sur la localisation. Si vous utilisez un annuaire ou un site Web de petites annonces similaire à Yelp, TripAdvisor, Craigslist ou tout autre site similaire nécessitant la recherche basée sur la localisation, vous pouvez facilement le faire en l'intégrant à Google Maps. C'est une fonctionnalité essentielle pour certains utilisateurs car ils peuvent rechercher des produits, des services ou des lieux dans leur région. De plus, la plate-forme Google Maps a une limite mensuelle gratuite qui devrait être suffisante si votre site Web reçoit un trafic modéré.

Dans ce didacticiel pas à pas, nous vous expliquerons comment ajouter la recherche de localisation à votre site Web d'annuaire. Nous allons utiliser HivePress, un plugin WordPress gratuit qui permet de créer un site annuaire en un clin d'œil. En outre, utilisera ListingHive, un thème de répertoire WordPress gratuit, ainsi que l'extension HivePress Geolocation pour l'intégration avec Google Maps.

Cependant, si vous avez déjà un site Web d'annuaire construit avec un autre plugin ou thème, vous pouvez ignorer les premières étapes et faire défiler jusqu'à "Comment réparer" Oups ! Quelque chose s'est mal passé. Cette page n'a pas chargé Google Maps correctement " " section pour le dépannage des erreurs les plus courantes.

Alors, passons à la première étape !

Installation de HivePress

Tout d'abord, vous devez installer HivePress. Vous pouvez l'installer comme n'importe quel autre plugin gratuit dans WordPress. Accédez simplement à la section Plugins> Ajouter un nouveau et trouvez-le avec la barre de recherche, puis installez-le et enfin activez-le en cliquant sur le bouton "Activer". Une fois l'installation terminée, vous pouvez passer à l'étape suivante : l'installation des extensions.

De plus, si vous trouvez cela difficile, vous pouvez suivre le screencast ci-dessous pour installer HivePress directement depuis le tableau de bord WordPress.

Installation d'extensions

L'étape suivante consiste à installer l'extension Geolocation pour permettre aux utilisateurs de rechercher des listes par emplacement. Pour l'installer, survolez simplement la section HivePress et cliquez sur le lien "Extensions". Trouvez l'extension de géolocalisation dans la liste, cliquez sur le bouton "Installer", et enfin activez l'extension.

En outre, le screencast suivant montre le processus courant d'installation des extensions HivePress, afin que vous puissiez le suivre étape par étape.

Création d'un nouveau projet

Une fois que vous avez terminé l'installation du plugin et l'extension Geolocation, il est temps de créer un projet sur Google Cloud Platform. En supposant que vous ayez déjà un compte Google, vous devriez pouvoir accéder à ce tableau de bord sans aucun problème. Cependant, si vous n'en avez pas, il est essentiel de créer un compte Google.

Vous devez maintenant créer un projet en cliquant sur le bouton "Créer un projet", puis le nommer, et enfin, cliquer sur le bouton "Créer".

Configuration de la facturation

Maintenant, si vous n'avez pas de compte de facturation avec Google, vous devez en créer un nouveau pour activer la facturation du projet. Mais ne vous inquiétez pas, vous n'avez rien à payer maintenant, ce n'est qu'une des conditions requises pour utiliser l'API Google Maps. Suivez simplement le lien et remplissez tous les champs du formulaire, y compris les détails du mode de paiement.

Vous recevrez un crédit gratuit de 200 $ chaque mois, et dans la plupart des cas, c'est plus que suffisant pour couvrir les dépenses d'utilisation des services Google sur votre site Web. De plus, il est possible de mettre en place des limites et des notifications, afin de ne jamais dépasser le crédit gratuit. Vous pouvez consulter la tarification afin d'avoir une meilleure idée de son fonctionnement et de vous assurer que vous pouvez utiliser les cartes gratuitement.

Après avoir ajouté vos informations de facturation, vous obtiendrez une fenêtre contextuelle avec les types d'API que vous souhaitez activer. Sélectionnez Cartes et lieux comme sur la capture d'écran ci-dessous et cliquez sur le bouton "Activer". De plus, s'il n'y a pas de fenêtre contextuelle, vous pouvez activer ces API via la page Bibliothèque d'API Google.

Création d'une clé API

L'étape suivante consiste à créer une clé API pour votre site Web. Pour ce faire, accédez à la page Identifiants et sélectionnez votre projet.

Sur la page Credentials, vous pouvez voir la clé API déjà générée. Si vous venez de créer votre compte de facturation, une clé peut être générée automatiquement. Dans ce cas, vous pouvez simplement cliquer dessus pour le modifier. Cependant, s'il n'y a pas de clé API sur la page, vous pouvez en créer une nouvelle dans la section Créer des informations d'identification > Clé API .

Ensuite, vous devez configurer votre clé API en définissant les restrictions d'application. C'est essentiel car si vous intégrez simplement la clé, elle s'affichera en texte brut dans le code source de votre site Web. C'est pourquoi vous devez restreindre cela afin que d'autres personnes ne puissent pas utiliser votre clé API pour leurs projets. Pour ce faire, ajoutez simplement le référent HTTP pour autoriser les requêtes API de votre site Web uniquement. Définissez simplement l'adresse de votre site Web, mais ajoutez également la partie "/*" à la fin pour autoriser les demandes d'API à partir de n'importe quelle sous-page du site Web, afin que Google Maps fonctionne sur toutes les pages de votre site Web.

Vous devez maintenant définir des restrictions d'API dans le champ suivant. Cliquez sur Restreindre la clé et sélectionnez Maps JavaScript API, Places API, Geocoding API dans le menu déroulant. Si certaines des API mentionnées ne sont pas répertoriées, vous devez d'abord les activer sur la page de la bibliothèque d'API Maps. Une fois les trois API Google activées et sélectionnées dans le menu déroulant, cliquez sur le bouton "Enregistrer".

Activation de l'intégration de Google Maps

C'est ça! Vous venez de créer une clé API et la touche finale consiste à activer Google Maps sur votre site Web. Tout d'abord, copiez la clé API sur la page APIs & Services > Credentials . Maintenant, si vous utilisez le plugin HivePress, accédez à votre tableau de bord WordPress et accédez à la section HivePress > Paramètres > Intégrations > Google Maps . Ensuite, collez simplement votre clé API dans le champ approprié et cliquez sur le bouton "Enregistrer les modifications" pour ajouter la recherche de localisation à votre site Web.

Félicitations! À partir de ce moment, votre site Web est intégré à Google Maps et vous pouvez désormais ajouter des emplacements aux listes existantes dans la section Listes . De plus, les utilisateurs devront définir l'emplacement des listes nouvellement ajoutées. De plus, il y a un champ de recherche d'emplacement sur votre site Web et une carte Google, vous pouvez donc l'essayer et rechercher certaines annonces en fonction de leur emplacement.

Dépannage

S'il y a des problèmes avec la clé API que vous avez créée, la carte peut afficher le message "Oups ! Quelque chose s'est mal passé. Cette page n'a pas chargé Google Maps correctement . Il s'agit d'une erreur assez courante car la configuration d'une clé API n'est pas un processus très convivial et les utilisateurs sautent souvent certaines étapes de configuration. Cependant, vous pouvez le résoudre en un rien de temps si vous connaissez les racines du problème.

Pour connaître la raison de cette erreur, vous devez ouvrir la console JavaScript. Vous pouvez l'ouvrir avec quelques frappes qui diffèrent selon votre navigateur. Vérifiez la réponse sur StackOverflow qui explique comment ouvrir la console JavaScript. Si vous utilisez le navigateur Chrome, vous pouvez simplement appuyer sur CTRL+Shift+I pour l'ouvrir. Une fois que vous l'ouvrez, vous devriez voir le message d'erreur, quelque chose comme celui-ci.

Il est important de savoir exactement ce qui cause l'erreur afin de pouvoir la corriger. Il peut y avoir plusieurs erreurs différentes, mais nous montrerons comment résoudre les plus fréquentes :

• MissingKeyMapErreur ;
• Erreur de carte de clé invalide ;
• ApiNotActivatedMapError ;
• RefererNotAllowedMapError.

Toutefois, si vous rencontrez une erreur qui n'est pas répertoriée ci-dessus, consultez la documentation des messages d'erreur de l'API Google Maps pour savoir ce qui ne va pas et comment y remédier.

MissingKeyMapError

Cette erreur signifie qu'il n'y a aucune clé API, vous devez donc en créer une si vous souhaitez activer Google Maps sur votre site Web. Si vous obtenez cette erreur, nous vous recommandons de suivre ce tutoriel à partir de la première étape afin de créer une clé API et de configurer correctement les cartes.

InvalidKeyMapError

Cette erreur apparaît lorsque vous utilisez la mauvaise clé API. Vous l'avez probablement créé, mais vous ne l'avez pas ajouté correctement à votre site Web. Pour corriger cette erreur, accédez à la page des informations d'identification et copiez la clé API.

Si vous utilisez le plug-in HivePress et son extension de géolocalisation, accédez à la section Tableau de bord WordPress > HivePress > Paramètres > Intégrations > Google Maps , collez votre clé API dans le champ approprié et cliquez sur le bouton « Enregistrer les modifications ».

ApiNotActivatedMapErrorApiNotActivatedMapError

Si vous obtenez ce type d'erreur, cela signifie que vous n'avez pas activé les API requises. Il existe de nombreuses API différentes dans la bibliothèque d'API Google Maps, vous devez donc accéder à la bibliothèque et activer celles qui sont requises pour votre projet. Une fois que vous les avez activés, n'oubliez pas de les ajouter également à la section Restrictions API dans vos paramètres de clé API dans la section Informations d'identification.

Par exemple, si vous utilisez le plug-in HivePress avec son extension Geolocation et que vous souhaitez ajouter la recherche de localisation à votre site Web d'annuaire, vous devez activer et autoriser l'accès aux API Google suivantes : Maps JavaScript API, Places API, Geocoding API . Vous pouvez jeter un œil à la capture d'écran avec les API nécessaires.

RefererNotAllowedMapError

Cette erreur se produit si les restrictions du référent API ne sont pas définies correctement. Par exemple, si les cartes fonctionnent sur une page de votre site Web et ne fonctionnent pas sur les autres, vous avez probablement rencontré le même problème.

La bonne nouvelle est que vous avez correctement configuré et entré une clé API, et qu'il n'y a qu'un petit détail à corriger. Accédez à la page des informations d'identification et cliquez sur votre clé API pour la modifier. Dans la section Restrictions d'application, sélectionnez "Référents HTTP (sites Web)". Remplissez ensuite les restrictions du site Web comme indiqué ci-dessous, mais remplacez "exemple" par votre nom de domaine et cliquez sur le bouton "Enregistrer". Cela peut prendre jusqu'à 5 minutes pour que les paramètres prennent effet.

Il est important d'ajouter la partie "/*" à la fin pour autoriser les demandes d'API à partir de n'importe quelle sous-page du site Web, afin que Google Maps fonctionne sur toutes les pages de votre site Web.

Ne fonctionne toujours pas

• Si vous modifiez quelque chose dans vos restrictions de clé API, attendez jusqu'à 5 minutes pour que les paramètres prennent effet ;
• Si l'erreur persiste, vérifiez à nouveau la console JavaScript pour plus de détails. Il pourrait y avoir une erreur après avoir résolu la première ;
• Vous pouvez également essayer de vider le cache du navigateur.

Conclusion

C'est ça! Ils disent que s'il y a une volonté, il y a un moyen. Vous venez d'ajouter une fonction de recherche d'emplacement à votre site Web d'annuaire, et maintenant vos utilisateurs peuvent rechercher des listes par emplacement. C'est une fonctionnalité très importante pour la plupart des répertoires. Bien que le processus d'ajout de Google Maps puisse sembler un peu compliqué, cela en vaut la peine. Une fois que vous avez ajouté la recherche de localisation à votre site Web, cela affectera positivement l'expérience utilisateur. L'expérience utilisateur est très importante pour tout site Web, car c'est l'une des pierres angulaires d'un bon trafic.

Comme vous pouvez le constater, vous pouvez intégrer Google Maps à votre site Web sans aucune compétence en matière de codage. Si vous n'avez pas encore décidé quel plugin utiliser pour créer votre site Web d'annuaire, vous pouvez envisager HivePress. Il vous permet de créer des répertoires et des listes de sites Web de tout type. En outre, il comprend déjà une extension gratuite qui permet la recherche basée sur la localisation et plusieurs autres fonctionnalités gratuites que vous pourriez trouver utiles.

De plus, n'hésitez pas à consulter nos articles :

• Plugins d'annuaire WordPress gratuits les plus populaires
• Top des thèmes d'annuaire WordPress
• Erreurs à éviter lors de la construction d'un site d'annuaire WordPress