Géolocalisation et GoogleMap avec ionic 4

admin 8 septembre 2019 0 Comments

Ionic 4 offre un ensemble de plugin parmi lesquelles le plugin de géolocalisation et celui de google maps. De nos jours, avec la forte croissance de la technologie et la présence des radios GPS sur les équipements smart, d’où la forte conversion vers les applications mobile utilisant un système de géolocalisation. Nous verrons dans cet article comment créer une application mobile de géolocalisation avec ionic 4.

#1: Prérequis

Dans notre projet, chaque plugin aura rôle un très important à jouer:

Le plugin géolocalisation nous servira a récupérer les coordonnées GPS de position a partir de notre smartphone;
Le plugin google maps nous permettra d’afficher la carte de google maps ainsi que les différents emplacements s y trouvant.

Nous allons commencer par créer notre projet ionic et installer le plugin qui sera nécessaire pour nous notre application mobile.

ionic start gMap --blank

ionic cordova plugin add cordova-plugin-geolocation
npm install @ionic-native/geolocation

Nous allons installer uniquement le plugin de géolocalisation, car nous allons utiliser voir comment utiliser google maps depuis les méthodes primaires utilisées en javascript.

#2: Implémentation de la solution

1- Configuration de notre projet

Apres avoir correctement installer les différents éléments qui on été évoquées dans les prérequis, nous allons créer une clé api sur le site de google Maps.

Nous allons nous rendre dans le fichier src/index.html, où on va inclus via syntaxe javascript notre bibliothèques google Maps. Cette inclusion se fera après la balise <app-root></app-root> .

<script src="http://maps.google.com/maps/api/js?key=la clé de l' API"></script>

Apres l’étape précédente, notre fichier index.html aura pour contenu

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Ionic App</title>

    <base href="/" />

    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />

    <link rel="icon" type="image/png" href="assets/icon/favicon.png" />

    <!-- add to homescreen for ios -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>

<body>
    <app-root></app-root>
    <!-- load google map api -->
    <script src="http://maps.google.com/maps/api/js?key=la clé de l 'API "></script>
</body>

</html>

Nous allons poursuivre par la déclaration de notre plugin de géolocalisation dans le fichier src/app/app.module.ts. Cette déclaration se féra dans le bloc providers et on aura :

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {RouteReuseStrategy} from '@angular/router';

import {IonicModule, IonicRouteStrategy} from '@ionic/angular';
import {SplashScreen} from '@ionic-native/splash-screen/ngx';
import {StatusBar} from '@ionic-native/status-bar/ngx';
import {Geolocation} from '@ionic-native/geolocation/ngx';
import {AppComponent} from './app.component';
import {AppRoutingModule} from './app-routing.module';

@NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [BrowserModule,
        IonicModule.forRoot(),
        AppRoutingModule],
    providers: [
        StatusBar,
        Geolocation,
        SplashScreen,
        {provide: RouteReuseStrategy, useClass: IonicRouteStrategy}
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

2- Création des pages et implémentation de la solution

Pour commencer, nous allons nous rendre dans le répertoire src/app/home qui a été générée pendant la création de notre projet. Dans ce répertoire, nous allons éditer le fichier home.page.html où nous allons déclare une balise div qui contiendra notre carte de google map.

<ion-header>
    <ion-toolbar color="primary">
        <ion-title>
            Geolocalisation
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <div id="map_canvas"></div>
</ion-content>

Par la suite nous allons éditer le fichier home.page.ts, c’est dans ce fichier que tous se déroulera. Tout d’abord, nous allons déclarer la bibliothèque google après les différentes importations de notre page

declare var google: any;

Cette déclaration contiendra les différentes prototypes que nous utiliserons pour la création la carte google Maps de notre application ionic.

Dans le constructeur de notre fichier, nous allons déclarons aussi notre plugin de géolocalisation afin de pouvoir récupérer nos coordonnées GPS

constructor(public geolocation: Geolocation)

Par la suite nous allons créer aussi une fonction load() qui contiendra les différentes instructions pour la création de notre map. Dans un premier temps, cette fonction récupère les coordonnées notre position grâce this.geolocation.getCurrentPosition() qui par la suite retournera ceux-ci à google map. Google map se centrera sur les coordonnées de notre position

import {Component} from '@angular/core';
import {Geolocation} from '@ionic-native/geolocation/ngx';

declare var google: any;

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})
export class HomePage {

    map: any;

    constructor(public geolocation: Geolocation) {
        this.load();
    }

    
    load() {
        this.geolocation.getCurrentPosition().then((resp) => {
            let lat = resp.coords.latitude;
            let lng = resp.coords.longitude;
            const latLng = new google.maps.LatLng(lat, lng);
            this.map = new google.maps.Map(document.getElementById('map_canvas'), {
                zoom: 14,
                center: latLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false
            });

        });
    }
}

Remarque: Dans cette instruction new google.maps.Map(document.getElementById(‘map_canvas’) qui est utilisé pour appeler la carte google map, map_canvas représente l’identifiant de notre balise div.

Pour terminer, dans notre fichier src/app/home/home.page.scss nous allons déclarer des styles de mises en forme pour définir les proportions de notre carte :

ion-content {
    #map_canvas {
        width: 100%;
        height: 100%;
    }
}

résultat de la création de notre carte google map

3- Enregistrement des emplacements et boites d’information sur google map

Grace à google map, nous avons aussi la possibilité d’ajouter les emplacements à des positions bien spécifiques sur notre application ionic. Sur google map un emplacement est appelé marker et une boite d’information InfoWindow, ces deux éléments se présentent comme suit :

Par défaut si nous ne définissons pas d’icone pour un emplacement alors il utilisera celui proposé par google map. Dans notre projet, nous allons ajouter nos icônes dans le répertoire src/assets/images, puis dans le notre fichier home.page.ts. Cette variable nous permettra de nous situer dans le répertoire des icônes que nous allons utiliser dans notre projet.

Pour l’ajour de notre position sur la carte map de notre application mobile, nous allons créer la fonction ci-dessous puis qui sera appelé dans la fonction load()

    addMyPosition(latLng) {
        const marker = new google.maps.Marker({
            map: this.map,
            position: latLng,
            animation: google.maps.Animation.DROP,
            title: 'My position'
        });
        this.addInfoWindowToMarker(marker);
    }

La fonction précédente appelle à son tour la fonction this.addInfoWindowToMarker(marker); c’est cette fonction qui se chargera d’afficher la boite d’information la position.

    addInfoWindowToMarker(marker) {
        const infoWindowContent = '<div id="content">' + marker.title + '</div>';
        const infoWindow = new google.maps.InfoWindow({
            content: infoWindowContent
        });
        marker.addListener('click', () => {
            infoWindow.open(this.map, marker);
        });
    }

Après ces la fin des différentes modifications apportées à notre application mobile, notre fichier home.page.ts sera :

import {Component} from '@angular/core';
import {Geolocation} from '@ionic-native/geolocation/ngx';

declare var google: any;

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})
export class HomePage {

    map: any;
    baseUrl = 'assets/images/';

    constructor(public geolocation: Geolocation) {
        this.load();
    }

    load() {

        this.geolocation.getCurrentPosition().then((resp) => {
            let lat = resp.coords.latitude;
            let lng = resp.coords.longitude;
            const latLng = new google.maps.LatLng(lat, lng);
            this.map = new google.maps.Map(document.getElementById('map_canvas'), {
                zoom: 14,
                center: latLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false
            });


            this.addMyPosition(latLng);
            this.addHousePosition();
            this.addCarPosition();
        });
    }

    addMyPosition(latLng) {
        const marker = new google.maps.Marker({
            map: this.map,
            position: latLng,
            animation: google.maps.Animation.DROP,
            title: 'My position'
        });
        this.addInfoWindowToMarker(marker);
    }


    addHousePosition() {
        const icon = this.baseUrl + 'home-address.svg';
        const latLng = new google.maps.LatLng(4.068998, 9.7118953);
        const marker = new google.maps.Marker({
            map: this.map,
            position: latLng,
            animation: google.maps.Animation.DROP,
            title: 'House position',
            icon: {
                url: icon,
                size: new google.maps.Size(32, 32),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(16, 16),
                scaledSize: new google.maps.Size(32, 32)
            }
        });
        this.addInfoWindowToMarker(marker);
    }


    addCarPosition() {
        const icon = this.baseUrl + 'car.svg';
        const latLng = new google.maps.LatLng(4.068998, 9.7318953);
        const marker = new google.maps.Marker({
            map: this.map,
            position: latLng,
            animation: google.maps.Animation.DROP,
            title: 'Car position',
            icon: {
                url: icon,
                size: new google.maps.Size(32, 32),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(16, 16),
                scaledSize: new google.maps.Size(32, 32)
            }
        });
        this.addInfoWindowToMarker(marker);
    }


    addInfoWindowToMarker(marker) {
        const infoWindowContent = '<div id="content">' + marker.title + '</div>';
        const infoWindow = new google.maps.InfoWindow({
            content: infoWindowContent
        });
        marker.addListener('click', () => {
            infoWindow.open(this.map, marker);
        });
    }

}

En définitive, après avoir suivi correctement les étapes précédentes nous obtiendrons notre application mobile qui se présentera textuellement comme présente l’image ci-dessous.

Cet article nous apprend comment créer une application mobile de géolocalisation avec ionic 4. Cependant, nous verrons dans les prochains articles comment faire des mises en formes et ainsi que tracer des routes sur google map.