Google Maps API Places Autocomplete en Typescript via Angular

Écrit par Yassine Amraoui

L’API Google Maps

Une API est un ensemble de méthodes et de classes utilisé par un logiciel ou une bibliothèque pour offrir des services afin d’échanger des données entre applications.

Google a développé une API que l’on appelle Google Maps API, permettant d’offrir aux codeurs une API pour leurs applications nécessitant de la cartographie de manière globale. Cette API est devenue payante depuis 2018, mais peut être utilisée gratuitement dans la plupart des cas.

Google offre un crédit de 200$ par mois pour l’utilisation de l’API, ce qui suffit dans la plupart des cas. Le site officiel détaille le prix des requêtes à l’API en fonction du service choisi.

L’API propose trois services : Maps, Route et Places

– Maps permet notamment d’afficher des plans statiques et dynamiques

– Route permet d’obtenir un itinéraire

– Places permet notamment de faire de la saisie automatique d’adresses

Dans cet article, nous traiterons le service Places de l’API Google Maps, en utilisant le langage Typescript via Angular

Utilisation de l’API avec Angular

Nous allons voir, avec le service Places Autocomplete proposé par l’API Google Maps, comment on peut faire de la saisie automatique d’adresses.

Nous allons créer un champ input que l’on va intégrer à l’API afin d’auto-compléter une adresse que l’utilisateur aura commencé à saisir, et ce, à la volée.

Dans notre cas, la version utilisée d’Angular est 6+.

Il faudra intégrer au préalable les dépendances et ajouter les composants et services dans les fichiers ‘module.ts’.

Etape 1 : Récupérer une clé API

Suivez les instructions officielles de Google pour récupérer une clé API :

Using API Keys | Maps JavaScript API | Google Developers

Google Maps Platform products are secured from unauthorized use by restricting API calls to those that provide proper…

developers.google.com

Etape 2 : Installer types/googlemaps

Lancez la commande suivante à la racine du projet :

npm install — save @types/googlemaps

Etape 3 : Ajouter la clé API dans le fichier index.html

Placez la balise <script> suivante entre les balises <head> et <body>, en remplaçant ‘YOUR_API_KEY’ par votre clé API :

<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=places&key=YOUR_API_KEY"></script>

Etape 4 : Créer un service Google Maps API

Créez un fichier de service Google Maps API (que l’on appellera ici google-maps.service.ts). Ce service contiendra les méthodes pour l’auto-complétion, en particulier un listener qui écoutera les entrées utilisateurs pour auto-compléter à la volée.

export class GoogleMapService {public placeSubject: Subject<google.maps.places.PlaceResult> = new Subject<google.maps.places.PlaceResult>();public placeObservable = this.placeSubject.asObservable();constructor() { }getPlaceAutocomplete(addressText: any): any {
  const autocomplete = new google.maps.places.Autocomplete(
  addressText.nativeElement,{ componentRestrictions: { country:
  ['FR', 'DE'] }, types:     ['establishment', 'geocode'] });
  google.maps.event.addListener(autocomplete,'place_changed',() => {
      const place = autocomplete.getPlace();                 
      this.placeSubject.next(place);
  });
}getAddrComponent(place: any, componentTemplate: any): any {
  let result;
  for (const component of place.address_components) {
    const addressType = component.types[0];
    if (componentTemplate[addressType]) {
     result = component[componentTemplate[addressType]];
     return result;
    }
  }
}getStreetNumber(place: any): any {
  const COMPONENT_TEMPLATE = { street_number: 'short_name' };
  return this.getAddrComponent(place, COMPONENT_TEMPLATE);
}getStreet(place: any): any {
  const COMPONENT_TEMPLATE = { route: 'long_name' };
  return this.getAddrComponent(place, COMPONENT_TEMPLATE);
}getCity(place: any): any {
  const COMPONENT_TEMPLATE = { locality: 'long_name' };
  return this.getAddrComponent(place, COMPONENT_TEMPLATE);
}getState(place: any): any {
  const COMPONENT_TEMPLATE = { administrative_area_level_1:  'short_name' };
  return this.getAddrComponent(place, COMPONENT_TEMPLATE);
}getDistrict(place: any): any {
  const COMPONENT_TEMPLATE = { administrative_area_level_2:      
  'short_name' };
  return this.getAddrComponent(place, COMPONENT_TEMPLATE);
}getCountryShort(place: any): any {
  const COMPONENT_TEMPLATE = { country: 'short_name' };
  return this.getAddrComponent(place, COMPONENT_TEMPLATE);
}getCountry(place: any): any {
  const COMPONENT_TEMPLATE = { country: 'long_name' };
  return this.getAddrComponent(place, COMPONENT_TEMPLATE);
}getPostCode(place: any): any {
  const COMPONENT_TEMPLATE = { postal_code: 'long_name' };
  return this.getAddrComponent(place, COMPONENT_TEMPLATE);
}getPhone(place: any): any {
  const COMPONENT_TEMPLATE = { formatted_phone_number: 
  'formatted_phone_number' };
  return this.getAddrComponent(place, COMPONENT_TEMPLATE);
}}

La variable placeObservable est un observable sur placeSubject. C’est sur ce dernier que l’on envoie les informations reçues dynamiquement des entrées utilisateurs. La méthode getPlaceAutocomplete prend en paramètre une variable addressText qui correspond à la valeur des entrées utilisateurs. C’est sur cette variable que l’on ajoute un listener pour qu’à chaque entrée utilisateur, on appelle l’API Google Maps pour auto-compléter cette entrée. Le résultat de l’auto-complétion est un JSON de type google.maps.places.PlaceResult.

const place = autocomplete.getPlace();

C’est cette variable place qui va contenir l’intégration de l’auto-complétion avec toutes les informations sur l’emplacement choisi.

Les autres méthodes, comme leurs noms l’indiquent, permettent de parser le PlaceResult pour récupérer les informations qui nous intéressent (numéro de rue, ville, pays, etc.).

Etape 5 : Appel du service Google Maps API dans un composant avec un input html

Dans l’html d’un composant (que l’on nommera ici component.html), ajouter une variable qui écoutera les entrées utilisateurs dans une balise <input> :

<input type="text" #addressText>

La variable addressText sera présente dans le fichier .ts (component.ts dans cet exemple) :

@ViewChild('addressText') addressText!: ElementRef;
protected placeSubscription: Subscription;

Le ViewChild permet de faire un lien (que l’on appelle « reference directive » en typescript) entre l’input présent dans le fichier .html ayant un tag avec le même nom, et la variable associée dans la partie typescript.

Dans ce même fichier, il faut ajouter un appel à la méthode getPlaceAutocomplete présente dans le fichier google-maps.service.ts, avec comme paramètre la variable addressText qui écoute les entrées utilisateurs. On appelle cette méthode dans ngAfterViewInit :

ngAfterViewInit(): void {
  this.googleMapService.getPlaceAutocomplete(this.addressText);
}

Etape 6 : Récupération de l’adresse auto-complétée

On peut par exemple utiliser une méthode ngModelChange ou simplement input afin d’appeler, lors d’une entrée de début d’adresse par l’utilisateur, une méthode qui va réaliser une action avec l’adresse auto-complétée. Dans l’exemple ci-dessous on va simplement afficher la nouvelle adresse :

Dans le fichier component.html :

<input type="text" (input)="onAddressChange()" #addressText>

Dans le fichier component.ts :

onAddressChange(): void {
  this.placeSubscription =
  this.googleMapService.placeObservable.subscribe(
    (place) => { console.log('nouvelle adresse : ' +
    place.formatted_address); }
  );
}