How to get location (latitude and longitude) in ionic 4

I want to get my location in device or browserve so to do this I used Geolocation and Native Geocoder in ionic, you guyscan follow step by step as follows:

Step 1. Create a new ionic Application

 Install ionic and Cordova CLI

 $ npm install -g ionic cordova

 Create a new tabs Application

 $ ionic start LocationHome tabs

 Use CMD go to project

 $cd LocationHome

Step 2. Install the Cordova and Ionic Native plugins

Geolocation
 Plugin geolocation

      $ ionic cordova plugin add cordova-plugin-geolocation

 Ionic native geolocation

    $ npm install @ionic-native/geolocation 

Native Geocoder
    Plugin nativeGeocoder install

    $ ionic cordova plugin add cordova-plugin-nativegeocoder

install native Geocoder

   $ npm install @ionic-native/native-geocoder

Step 3. Add code in app.module.ts, you shound import plugin Geolocation and plugin NativeGeocoder

   import { Geolocation } from '@ionic-native/geolocation/ngx';
   import { NativeGeocoder } from '@ionic-native/native-geocoder/ngx';

  At  providers: [] you add Geolocation and NativeGeocoder below

    providers: [
     Geolocation,
    NativeGeocoder,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]

All code in app.module.ts :

import { NgModule, ErrorHandler } from '@angular/core';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { NativeGeocoder } from '@ionic-native/native-geocoder/ngx';
@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
     Geolocation,
    NativeGeocoder,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Step 4. in file home.page.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <h1>Get Location</h1>

  <div *ngIf="geoLatitude">
    <p>Latitude : {{geoLatitude}}</p>
    <p>Longitude : {{geoLongitude}}</p>
    <p>Accuracy : {{geoAccuracy}}</p>
 
  </div>
</ion-content>

Step 5. in file home.page.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { NativeGeocoder,NativeGeocoderOptions } from '@ionic-native/native-geocoder/ngx';
import {  NativeGeocoderResult } from '@ionic-native/native-geocoder/ngx';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  geoLatitude: number;
  geoLongitude: number;
  geoAccuracy:number;
  geoAddress: string;

  watchLocationUpdates:any;
  loading:any;
  isWatching:boolean;

  constructor(public navCtrl: NavController,
    private geolocation: Geolocation,
    private nativeGeocoder: NativeGeocoder
  ) {
    this.getGeolocation()
  }
    getGeolocation(){
      this.geolocation.getCurrentPosition().then((resp) => {
     
        this.geoLatitude = resp.coords.latitude;
        this.geoLongitude = resp.coords.longitude;
        this.geoAccuracy = resp.coords.accuracy;
     
       }).catch((error) => {
     
       });
    }

}

Demo online:

Tags: how to get Address in ionic, get address in ionic, ionic 4 geolocation, how to get name address from latitude, get latitude in ionic,ionic 4, ionic 3, get mylocation in ionic 4, get location ionic example,geocoder geocode address,google maps api get latlng from