É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…
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); }
);
}
Pour aller plus loin
Pour plus utiliser les services Maps et Route de l’API Google Maps, voici un lien vers la documentation officielle :
Google Maps Platform | Google Developer
Créez des cartes personnalisées et évolutives, qui répondent concrètement aux besoins de vos utilisateurs avec des…
Bibliographie
Documentation officielle Google Maps API rubrique Places Autocomplete
Place Autocomplete | Maps JavaScript API | Google Developers
Send feedback The Place Autocomplete sample demonstrates how to use the Place Autocomplete widget to provide a…
Grille tarifaire | Google Maps Platform | Google Clou
La tarification repose sur le principe du paiement à l’usage : vous ne payez que ce que vous consommez. Chaque mois…
À lire aussi
Fresque du Numérique
Ouicommit – L’intelligence artificielle en entreprise, on y est !
Hackathon Women in Tech : un engagement pour une tech plus inclusive
