contact@nusyce.com
+237 692 324 989 | 679 302 498
Demandez un devis
  • Accueil
  • Nos services
    • Création graphique
    • Application mobile
    • Création Site Web | Application Web
    • Marketing Digital
    • Intégration de solution métier
  • Portfolio
  • Nous contacter
  • Accueil
  • Nos services
    • Création graphique
    • Application mobile
    • Création Site Web | Application Web
    • Marketing Digital
    • Intégration de solution métier
  • Portfolio
  • Nous contacter
  • Accueil
  • Nos services
    • Création graphique
    • Application mobile
    • Création Site Web | Application Web
    • Marketing Digital
    • Intégration de solution métier
  • Portfolio
  • Nous contacter
  • Accueil
  • Nos services
    • Création graphique
    • Application mobile
    • Création Site Web | Application Web
    • Marketing Digital
    • Intégration de solution métier
  • Portfolio
  • Nous contacter
Blog
Application mobileIonic framework

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.

Google Maps API key

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 :Detail position

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.

Application mobile
35
2120 Views
Comment ajouter une police d'écriture sur Ionic 4PrevComment ajouter une police d'écriture sur Ionic 418 août 2019
Comment designer votre carte google map18 septembre 2019Comment designer votre carte google mapNext

Related Posts

Application mobileIonic framework

Comment faire un CRUD sur ionic 4 avec local Storage

Le local storage est une librairie utilisé sur les applications Angular pour permettre...

admin 6 août 2019
Application mobileIonic framework

Comment faire un crud sur Ionic 4 + Php + MySql part 1

Sauvegarder les données de votre application mobile sur ionic 4 vers un server distant...

admin 14 août 2019

Laisser un commentaire Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Articles récents
  • Comment créer un preloader sur ionic 4
  • Comment designer votre carte google map
  • Géolocalisation et GoogleMap avec ionic 4
  • Comment ajouter une police d’écriture sur Ionic 4
  • Comment faire un crud sur Ionic 4 + Php + MySql part 2

NUSYCE est une agence numérique spécialisée dans le développement d'applications web et mobiles. Grâce aux technologies de pointe et un développement personnalisé, nous vous proposons la croissance par l'innovation.
Services
Création graphique
Application mobile
Intégration de solution
Développement d’application Web
Référencement SEO / SEA
Contacts
Adresse : Rond-point Dakar Immeuble Afriland Frist Bank Douala
Site Web: nusyce.com
Email: contact@nusyce.com
Tél: +237 692 324 989 | 679 302 498
Newsletter

VOS RÊVES, NOS RÉALISATIONS

Copyright © 2021 NUSYCE. All Rights Reserved.