IONIC GOOGLE MAPS: Comment utiliser Google Maps dans Ionic 4 ?

Bonjour à tous! Voyons aujourd’hui comment intégrer Google Maps dans votre application Ionic 4 ?

Dans ce tutoriel nous allons voir comment utiliser l’API Google Maps JavaScript API pour créer une application de cartographie avec Ionic.

L’affichage de carte est utile dans de nombreuses applications comme Uber, Runtastic ou encore Airbnb, avec des fonctionnalités proposées par Google Maps vraiment très intéressante.

Dans ce tutoriel Google Maps Ionic, nous allons voir comment:

• Installer le plugin Ionic cordova-plugin-googlemaps
• Créer une clé d’API pour utiliser Google Maps
• Afficher une carte à un endroit donné
• Modifier le type de carte (satellite, plan, terrain)
• Ajouter des marqueurs à notre carte

Par curiosité où si vous souhaitez aller plus loin après ce tutoriel, vous pouvez consulter la documentation officielle de l’API Google Maps Javascript: https://developers.google.com/maps/documentation/javascript/tutorial

1 – Comment installer le plugin cordova-plugin-googlemaps ?

Pour commencer nous allons installer le plugin cordova-plugin-googlemaps dans notre application Ionic.

Pour cela vous pouvez consulter le site officielle du plugin en question qui vous proposera toutes les étapes d’installation:

https://github.com/ionic-team/ionic-native-google-maps/blob/master/documents/README.md

La première commande à entrer est une commande cordova et fait directement appel à l’installation du plugin cordova-plugin-googlemaps:

ionic cordova plugin add cordova-plugin-googlemaps

La deuxième commande à entrer est une commande NPM (ajouter sudo si vous êtes sur Mac) et nous permet d’installer le plugin natif d’Ionic pour les version iOS et Android:

npm install --save @ionic-native/core@latest @ionic-native/google-maps@latest

Une fois ces deux commandes entrés, vous pouvez utiliser librement Google Maps dans votre application Ionic.

Mais attention, Google Maps demande de fournir une clé d’API pour nous identifier et autoriser Google à utiliser son service.

2 – Comment créer une clé d’API Google Maps pour notre application Ionic ?

Nous allons maintenant voir comment générer la clé d’API pour notre projet Ionic dans la Google Cloud Console.

Vous pouvez consulter la documentation du plugin pour créer une clé: https://github.com/ionic-team/ionic-native-google-maps/blob/master/documents/api_key/generate_api_key.md

Sinon suivez avec moi ce tutoriel et créons ensemble votre clé d’API Google Maps pour votre application Ionic.

Rendez-vous tout d’abord sur le site suivant: https://cloud.google.com/maps-platform/#get-started

La première chose à faire est de choisir l’outil ou le produit que nous souhaitons utiliser parmi la suite de Google Maps Platform.

Ici nous choisissons d’utiliser Maps pour afficher des cartes dans notre application Ionic.

Une fois le produit ou l’outil sélectionné, Google nous demande de nommer notre projet, par exemple: Ionic Google Maps.

Enfin après une étape de validation, Google vous génère votre clé d’API, à condition d’avoir un compte de facturation associé à votre compte Google Cloud Console.

Pour créer une compte de facturation, suivez les instructions de Google et créer votre compte gratuitement.

Une fois toutes ces étapes réalisés, Google devrait vous proposer votre clé d’API de la manière suivante:

Passons maintenant à l’utilisation du plugin cordova-plugin-googlemaps dans notre application Ionic 4.

3 – Comment afficher une carte Google Maps à un endroit donné dans Ionic ?

Comment afficher notre première carte dans notre application Ionic 4 ? Pour commencer nous devons nous rendre dans le fichier TypeScript de la page où nous souhaitons afficher notre carte:

src/app/home/home.page.ts

Nous allons ensuite importer tous les modules du plugin Google Maps dans notre page, ils sont nombreux et nous ne les utiliserons pas tous dans ce tutoriel.

import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsMapTypeId,
  GoogleMapsEvent,
  GoogleMapOptions,
  CameraPosition,
  MarkerOptions,
  Marker,
  Environment
} from '@ionic-native/google-maps';

Pour suivre ce tutoriel et créer votre première application de cartographie, vous pouvez importer les plugins suivants dans votre page:

import { ActionSheetController, Platform, AlertController } from '@ionic/angular';

La première variable que nous devons déclarer est simplement l’objet qui contiendra notre carte Google Maps.

Nous faisons donc appel au plugin GoogleMap pour déclarer cette variable map:

export class HomePage {
  map: GoogleMap;

Passons maintenant au constructor pour déclarer les plugins et initialiser notre page.

constructor(
    public alertController: AlertController,
    public actionCtrl: ActionSheetController,
    private platform: Platform
  ) {
    if (this.platform.is('cordova')) {
      this.loadMap();
    }
  }

Les deux premiers plugins AlertController et ActionSheetControler nous servirons dans la suite de notre application pour les interactions avec l’utilisateur.

Le plugin Platform en revanche n’est utile que lors de l’initialisation de notre page. En fait on lui demande de vérifier la plateforme en cours avant d’exécuter la fonction qui générera notre carte.

Pour rappel en entrant « ionic serve » dans votre terminal, vous lancez une version test de votre application.

Si vous souhaitez visualiser la version définitive de votre application Ionic vous devez entrer « ionic cordova run browser« .

Vous accéderez à des fonctionnalités natives comme l’accès à la caméra où l’exécution de certain plugin comme ici GoogleMaps.

Passons maintenant à la fonction pour créer notre première carte avec Google Maps:

loadMap() {
	Environment.setEnv({
		API_KEY_FOR_BROWSER_RELEASE: 'AI*********************************DPM',
		API_KEY_FOR_BROWSER_DEBUG: 'AI*********************************DPM'
	});
	this.map = GoogleMaps.create('map_canvas', {
		camera: {
			target: {
				lat: 43.610769,
				lng: 3.876716
			},
			zoom: 12,
			tilt: 30
		}
	});
}

J’ai fait en sorte de créer la fonction la plus simple possible qui ne contient que les lignes de code indispensables à l’affichage de la carte.

Nous devons commencer par préciser la valeur de notre clé d’API Google Maps avant de créer notre carte, il s’agit d’une étape nécessaires pour les tests sur navigateur:

Environment.setEnv({
	API_KEY_FOR_BROWSER_RELEASE: 'AI*********************************DPM',
	API_KEY_FOR_BROWSER_DEBUG: 'AI*********************************DPM'
});

Pour les tests sur terminal mobile iOS ou Android vous devez vous rendre dans le fichier config.xml de votre application et ajouter les lignes suivantes:

<widget ...>
  ...
  <preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="(api key)" />
  <preference name="GOOGLE_MAPS_IOS_API_KEY" value="(api key)" />
  ...
</widget>

Ensuite, pour revenir à la fonction loadMap(), la création de la carte se fait avec la ligne de code suivante:

this.map = GoogleMaps.create('map_canvas', {});

Nous indiquons l’identifiant de la boîte HTML dans laquelle nous souhaitons afficher notre carte, ici ‘map_canvas‘, puis nous indiquons tous les paramètres et options de notre carte:

camera: {
  target: {
    lat: 43.610769,
      lng: 3.876716
  },
    zoom: 12,
      tilt: 30
}

Pour la suite de ce tutoriel, vous devez créer l’espace dans lequel s’affichera votre carte. Rendez-vous dans votre page HTML et dans le <ion-content> pour ajouter la boîte suivante:

<div id="map_canvas"></div>

Attention, si vous laissez cette boîte comme ça elle aura des dimensions nulles lors du lancement de votre page.

Vous devez donc lui donner des propriétés CSS pour lui indiquer ces dimensions.

Ici nous demandons à la boîte de notre carte de prendre toute la place de notre page:

#map_canvas {
  width: 100%;
  height: 100%;
}

Vous pouvez maintenant lancer votre application avec la commande suivante:

ionic cordova run browser

Attention toutefois, il reste une dernière étape pour que Google nous autorise à utiliser son service.

Vous devez vous rendre dans votre Console Google Cloud et dans le tableau Identifiants du projet que vous venez de créer.

Dans les paramètres de votre clé API, vous devez ajouter les adresse de votre site web où vous afficherez votre carte, dans mon cas à l’adresse http://localhost:8000/home

Une fois votre URL ajouté, Google peut mettre quelques minutes avant d’autoriser Google Maps à fonctionner sur votre application.

Passons maintenant à l’affichage de différents types de carte dans notre application Ionic avec Google Maps.

4 – Comment modifier le type de la carte Google Maps dans Ionic ?

Nous souhaitons maintenant pouvoir modifier le type de carte, de passer du type plan au type satellite.

Pour cela nous créons un bouton flottant dans le coin gauche en bas de notre écran. Pour en savoir plus consultez la documentation Ionic: https://ionicframework.com/docs/api/fab

Nous luis associons la fonction mapOptions() que nous allons déclarer ensuite:

<ion-fab vertical="bottom" horizontal="start" slot="fixed">
  <ion-fab-button color="success" (click)="mapOptions()">
    <ion-icon name="map"></ion-icon>
  </ion-fab-button>
</ion-fab>

Nous allons ensuite utiliser une fonction issue du plugin GoogleMaps, qui va nous permettre en une ligne de code de modifier le type de notre carte:

this.map.setMapTypeId(GoogleMapsMapTypeId.SATELLITE);

Cette fonction setMapTypeId() vous permet d’affecter à votre carte tous les types de carte de Google Maps, qui se trouve être aux nombres de quatre:

• ROADMAP
• SATELLITE
• HYBRID
• TERRAIN
• NONE

Voilà l’exemple de l’affichage de chacun de ces types de carte avec Google Maps, qui comme vous pouvez le voir propose une grande diversité de données:

Vous retrouverez ces informations dans la documentation officielle du plugin à l’adresse suivante: https://github.com/ionic-team/ionic-native-google-maps/blob/master/documents/maptype/README.md.

Nous allons maintenant déclarer la fonction mapOptions() et afficher différents boutons à l’utilisateur pour qu’il choisisse son type de carte.

Pour cela nous utilisons les Action-Sheet d’Ionic, dont vous retrouvez les informations à l’adresse suivante: https://ionicframework.com/docs/api/action-sheet

Je déclare donc la fonction mapOptions() qui pour chaque option va exécuter la fonction setMapTypeId() avec une type de carte différent:

async mapOptions() {
    const actionSheet = await this.actionCtrl.create({
      buttons: [{
        text: 'Satellite',
        handler: () => {
          console.log('Satellite clicked');
          this.map.setMapTypeId(GoogleMapsMapTypeId.SATELLITE);
        }
      }, {
        text: 'Plan',
        handler: () => {
          console.log('Plan clicked');
          this.map.setMapTypeId(GoogleMapsMapTypeId.NORMAL);
        }
      }, {
        text: 'Terrain',
        handler: () => {
          console.log('Terrain clicked');
          this.map.setMapTypeId(GoogleMapsMapTypeId.TERRAIN);
        }
      }, {
        text: 'Annuler',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }]
    });
    await actionSheet.present();
  }

Son principe est très simple, pour chaque bouton que notre action-sheet propose, nous affectons à notre carte un type différent.

Bien sûr il doit être le même que le texte affiché du bouton, par exemple Satellite pour GoogleMapsMapTypeId.SATELLITE.

Vous pouvez maintenant tester le fonctionnement de votre bouton flottant en entrant la commande cordova suivante:

ionic cordova run browser

Votre action-sheet fonctionnera même avec la commande « ionic serve », en revanche elle ne pourra pas modifier le type de carte qui n’existe pas.

5 – Comment ajouter des marqueurs dans votre carte ?

Voyons maintenant en fin de ce tutoriel comment ajouter des marqueurs à votre carte Google Maps dans Ionic.

Pour commencer nous devons créer un bouton pour exécuter la fonction qui nous permettra d’ajouter des marqueurs.

Rendez-vous dans votre fichier HTML et ajouter le bouton suivant dans votre <ion-header>:

<ion-button (click)="addMarker()">
  <ion-icon slot="icon-only" name="add-circle-outline"></ion-icon>
</ion-button>

Votre <ion-header> peut par exemple ressembler à celç:

<ion-header>
  <ion-toolbar color="success">
    <ion-title>
      Ionic Google Maps
    </ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="addMarker()">
        <ion-icon slot="icon-only" name="add-circle-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Passons maintenant à la création de la fonction qui va ajouter notre marqueur.

Tout d’abord on commencer par créer la fonction appelé ici placeMarker() pour créer un marqueur et le positionner au centre de notre carte.

En fait cette fonction contient comme paramètre le titre de notre marqueur, on aurait pu directement lui donner une valeur par défaut, mais je voulais que chaque marqueur soit personnalisé.

placeMarker(markerTitle: string) {
   const marker: Marker = this.map.addMarkerSync({
      title: markerTitle,
      icon: 'red',
      animation: 'DROP',
      position: this.map.getCameraPosition().target
   });
}

Du coup, pour ajouter un texte ou titre spécifique à notre marqueur, nous allons créer une alerte et afficher un champ à remplir à notre utilisateur.

Vous pouvez consulter la documentation officielle d’Ionic sur les alertes: https://ionicframework.com/docs/api/alert

Voilà donc la fonction associé au bouton de notre header, qui nous affiche une alerte avec un champ titre à remplir:

async addMarker() {
    const alert = await this.alertController.create({
      header: 'Ajouter un emplacement',
      inputs: [
        {
          name: 'title',
          type: 'text',
          placeholder: 'Le titre'
        }
      ],
      buttons: [
        {
          text: 'Annuler',
          role: 'cancel',
          cssClass: 'secondary',
          handler: () => {
            console.log('Confirm Cancel');
          }
        }, {
          text: 'Ajouter',
          handler: data => {
            console.log('Titre: ' + data.title);
            this.placeMarker(data.title);
          }
        }
      ]
    });
    await alert.present();
  }

Une fois le champ titre entré et le bouton Ajouter cliqué, on peut afficher notre tire dans la console et exécuter la fonction placeMarker() avec comme paramètre le titre:

console.log('Titre: ' + data.title);
this.placeMarker(data.title);

On est effectivement capable de récupérer la valeur du champ affiché dans l’alerte, et de l’afficher par exemple dans la console lorsqu’on clique sur Ajouter.

Le but bien entendu est d’ajouter un nouveau marqueur avec ce titre-là raison pour laquelle on exécute la fonction placeMarker() avec comme paramètre le titre entré par l’utilisateur.

Pour finir, vous pouvez tester cette fonctionnalité en entrant la commande cordova:

ionic cordova run browser

Voilà c’est la fin de ce tuto, j’espère qu’il vous a plu, nous en se retrouve très vite sur la chaîne YouTube et sur le blog!