Intégration de l’API Google Places Autocomplete dans une application React

Voyons comment utiliser l’une des bibliothèques fournies par la plate-forme Google Maps, l’API Places, et comment elle peut être utilisée pour ajouter une fonctionnalité de saisie semi-automatique à une application React.

La plate-forme Google Maps fournit un riche ensemble de bibliothèques qui nous permet de travailler avec des cartes, d’obtenir des informations sur des endroitsroutes, etc. Tous ces éléments sont accessibles soit en adressant directement une requête HTTP au point de terminaison de la bibliothèque requise, soit en utilisant les SDK fournis, ce qui facilite l’intégration dans votre application.

L’API de saisie semi-automatique

Notre attention ici portera sur la Des endroits bibliothèque et ses services, dont l’API Places Autocomplete. L’API de saisie semi-automatique nous permet d’obtenir des prédictions de lieu à la volée, y compris, mais sans s’y limiter, les adresses postales, les adresses professionnelles, les points d’intérêt importants, etc. tout en tapant dans le champ de texte.

Dans cet article, nous allons intégrer cette API côté client dans un exemple d’application React.

Prérequis

Pour suivre ce tutoriel, vous aurez besoin de :

• React v16 ou plus récent
• Compréhension de base de React
• Un éditeur de texte

Configuration de l’API

Pour utiliser l’API Google Places, nous devons commencer par créer une application dans le Google Cloud Console. Ouvrez le lien, assurez-vous d’avoir un compte Google Cloud et cliquez sur « Phantom » pour commencer le processus de configuration de l’API.

Ensuite, cliquez sur « Nouveau projet » pour créer un nouveau projet.

Remplissez le formulaire avec le nom du projet et cliquez sur « Créer ».

Ensuite, dans le projet maintenant créé, nous devons activer l’API Places. Rendez-vous sur le tableau de bord et cliquez sur « Activer les API et les services ».

Utilisez la barre de recherche pour trouver l' »API Places » et sélectionnez-la dans les résultats.

Enfin, cliquez sur « Activer » pour activer l’API Places.

Maintenant, pour créer une clé API afin de rendre l’API Places accessible, suivez les étapes ici.

Noter: Pour éviter toute utilisation illicite de votre clé API par d’autres, vous pouvez limiter vos clés API à une application, un site Web ou une adresse IP.

Commencer

Ouvrez votre terminal et insérez le code suivant pour démarrer une application React.

npx create-react-app autocomplete

Maintenant que nous avons configuré notre projet sur Google Cloud Console, nous allons suivre les quatre étapes suivantes pour ajouter la fonctionnalité Places Autocomplete à l’application React.

• Inclure le script de la bibliothèque Places dans votre code
• Créez l’instance Places Autocomplete et liez-la à un champ de saisie
• Gérer les événements
• Personnaliser les styles

Inclure le script de bibliothèque Places dans votre code

Puisque nous travaillons côté client, nous devons d’abord charger l’API Javascript de Maps dans notre code et spécifier précisément que nous voulons la bibliothèque Places. Ouvrez votre fichier index.html dans le dossier public et incluez le code suivant.

<script src="https://maps.googleapis.com/maps/api/js?key=<INSERT-API-KEY-HERE>&libraries=places&callback=initMap"async></script>

Le code ci-dessus inclut une balise de script qui charge les API Google Maps à l’aide de la clé API que nous avons créée précédemment sur Cloud Console.

L’inclusion de la balise de script ne charge pas la bibliothèque de l’emplacement car elle est autonome et ne sera chargée que sur demande. Pour contourner ce problème, nous avons inclus dans l’URL un paramètre de requête de bibliothèques qui accepte une liste de bibliothèques séparées par des virgules à charger ici. Nous venons de spécifier des lieux pour que la bibliothèque Places soit chargée.

Noter: Assurez-vous d’insérer correctement votre clé API dans la balise de script.

Créer l’instance Places Autocomplete et la lier à un champ de saisie

Maintenant que nous avons chargé la bibliothèque Places dans notre code, nous allons l’utiliser dans nos composants React. Incluez le code suivant dans votre app.js.

import { useRef, useEffect } from "react";
import "./styles.css";
const AutoComplete = () => {
 const autoCompleteRef = useRef();
 const inputRef = useRef();
 const options = {
  componentRestrictions: { country: "ng" },
  fields: ["address_components", "geometry", "icon", "name"],
  types: ["establishment"]
 };
 useEffect(() => {
  autoCompleteRef.current = new window.google.maps.places.Autocomplete(
   inputRef.current,
   options
  );
 }, []);
 return (
  <div>
   <label>enter address :</label>
   <input ref={inputRef} />
  </div>
 );
};
export default AutoComplete;

Dans un premier temps, nous avons importé le crochet useRef et certains styles (nous en reparlerons plus tard). Ensuite, nous avons défini deux variables à l’aide du crochet useRef dans le corps de notre composant, qui contiendront les références à l’instance Autocomplete et au champ de saisie, respectivement.

Notre composant d’application renvoie du JSX, parmi lesquels se trouve le champ de saisie. Nous utiliserons cet élément comme source pour les chaînes d’entrée que nous transmettrons à notre instance de saisie semi-automatique pour obtenir des prédictions de lieu. Nous pouvons donc obtenir et stocker la référence à l’élément d’entrée dans la variable inputRef en la faisant passer par la prop ref.

Avant de passer au contenu du hook de cycle de vie useEffect, nous devons comprendre que la bibliothèque Places que nous avons incluse dans notre index.html nous fournit plusieurs classes pour ajouter une fonctionnalité de saisie semi-automatique. Les deux premières classes – Autocomplete et SearchBox – sont légèrement différentes mais similaires en ce sens qu’elles sont basées sur des widgets.

Ces deux classes sont les plus faciles à implémenter ; ils ajoutent automatiquement un composant d’interface utilisateur déroulant contenant des prédictions de lieu à tout champ d’entrée qui leur est lié. La AutocompleteService La classe ne fournit aucun composant d’interface utilisateur. Néanmoins, cela vous permet d’obtenir des données de prédiction de lieu par programmation et de les afficher selon vos conditions.

Dans l’appel useEffect, nous avons tout d’abord créé une instance de la classe Autocomplete. Ce constructeur reçoit deux arguments, le second étant facultatif. Le premier argument indique la référence au champ d’entrée où il afficherait les prédictions de lieu, tandis que le deuxième paramètre contient les options que nous voulons appliquer à la demande de prédiction et à la réponse.

Pour les options ci-dessus, nous voulons que les résultats de prédiction soient limités aux seuls établissements nigérians (ng). Dans la réponse renvoyée pour un lieu, nous souhaitons que les champs address_components, geometry, icon et name soient renvoyés par l’API pour un seul lieu.

Pour une liste complète de toutes les options et de leurs significations, consultez ici. Vous vous demandez peut-être pourquoi nous spécifions ces options. Il y a plusieurs raisons à cela, mais les plus évidentes sont les suivantes :

• Latence réduite
• Précision des API puisque vous ne demandez que ce que vous voulez
• Optimisation des coûts pour vous assurer d’être facturé uniquement pour les données que vous consommez dans votre application

Exécutez l’application avec la commande ci-dessous.

npm start

Maintenant, nous pouvons rechercher et sélectionner un élément dans la liste, comme indiqué ci-dessous.

Gérer les événements

Notre composant nous permet de choisir dans la liste déroulante des prédictions, mais la plupart du temps, nous voulons faire plus qu’afficher le résultat dans un champ de saisie. Nous pouvons souhaiter utiliser ces informations pour faire d’autres choses comme remplir un formulaire entier et ainsi de suite lorsque l’utilisateur sélectionne un élément dans la liste déroulante. Ouvrez votre fichier app.js et ajoutez le code suivant.

import { useRef, useEffect } from "react";
import "./styles.css";
const AutoComplete = () => {
 const autoCompleteRef = useRef();
 const inputRef = useRef();
 const options = {....
 };
 useEffect(() => {
  autoCompleteRef.current = new window.google.maps.places.Autocomplete(
   inputRef.current,
   options
  );
  autoCompleteRef.current.addListener("place_changed", async function () {
   const place = await autoCompleteRef.current.getPlace();
   console.log({ place });
  });
 }, []);
 return (
  <div>
   <label>enter address :</label>
   <input ref={inputRef} />
  </div>
 );
};
export default AutoComplete;

L’événement « place_changed » dans l’instance Autocomplete est déclenché chaque fois qu’un utilisateur clique sur l’un des éléments de la liste déroulante. Il est utilisé pour exécuter une logique sur l’endroit sélectionné. Dans le code ci-dessus, nous avons ajouté cet événement à notre instance Autocomplete et défini notre fonction de gestion qui récupère les informations sur le lieu choisi et les enregistre dans la console.

Bien sûr, cela peut contenir n’importe quelle fonctionnalité en fonction des besoins de notre application. Vous trouverez ci-dessous une illustration simple de ce qui est imprimé sur la console dans notre cas. Observez que les champs retournés correspondent à ceux que nous avons alimentés lors de la création de notre instance Autocomplete.

Personnaliser les styles

En utilisant l’une des classes basées sur les widgets, par exemple, Autocomplete et SearchBox, nous obtenons une liste déroulante de prédictions stylisées de manière à ce qu’elles soient bien adaptées à Google Maps. Cet élément d’interface utilisateur déroulant nous fournit plusieurs classes pour le personnaliser en fonction de nos besoins.

Maintenant, ouvrez votre styles.css et ajoutez les styles suivants pour styliser la liste déroulante.

.pac-container {
 background-color: #151515;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
  Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.pac-item,
.pac-item-query {
 color: #f7f7f7;
}
.pac-item:hover {
 background: #6666;
}

Pour voir une description complète de chaque nom de classe, cochez ici. Maintenant, exécutons le code avec la commande suivante.

npm start

Voici le résultat final.

Conclusion

Comme pour toutes les autres API de la plate-forme Google Maps, l’API Google Places peut être implémentée côté client ou côté serveur. Cet article explique comment configurer et utiliser l’API Places Autocomplete côté client. Vous êtes bien équipé pour utiliser cette API ou celles qui y sont liées dans de futurs projets avec ces connaissances.