Ionic Geolocation

Command prompt check npm module version

npm -v

Command prompt check ionic version

ionic -v

Command prompt  npm update global

sudo npm update -g

Command prompt date ionic cli global

npm update -g ionic

Command prompt create new project

ionic start geomap blank

Command prompt install geolocation plugin

ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="To locate you"

npm install --save @ionic-native/geolocation

Home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Geolocation Test 3
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <p>Latitude: {{ lat }}</p>
 <p>Longitude: {{ lng }}</p>
</ion-content>

Home.ts

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


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  lat: any;
  lng: any;

  constructor(public platform: Platform, public navCtrl: NavController, public geo: Geolocation) {

    platform.ready().then(() => {
      this.initMap();
    });
    

  }

  ionViewDidLoad(){
    
    // this.geo.getCurrentPosition().then( pos => {
    //   this.lat = pos.coords.latitude;
    //   this.lng = pos.coords.longitude;
    // }).catch( err => console.log(err) );  
   
  
  }

  initMap(){

    this.geo.getCurrentPosition({ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }).then( pos => {
      this.lat = pos.coords.latitude;
      this.lng = pos.coords.longitude;
    }).catch( err => console.log(err) );

    let watch = this.geo.watchPosition({
      enableHighAccuracy: true,
      timeout: 7000,
      maximumAge: 0
    });
    watch.subscribe((data) => {
    //this.deleteMarkers();
    //let updatelocation = new google.maps.LatLng(data.coords.latitude,data.coords.longitude);
    //let image = 'assets/imgs/blue-bike.png';
    //this.addMarker(updatelocation,image);
    //this.setMapOnAll(this.map);

    this.lat = data.coords.latitude;
      this.lng = data.coords.longitude;

  });
    
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Geolocation } from '@ionic-native/geolocation';
import { StatusBar } from '@ionic-native/status-bar';


import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Geolocation,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

config.xml

<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />

<config-file overwrite="true" parent="NSLocationWhenInUseUsageDescription" platform="ios" target="*-Info.plist">
  <string>Allow the app to know your location</string>
</config-file>

Run apps on device

ionic cordova run android

Reference

https://ionicframework.com/docs/v1/guide/testing.html

https://ionicframework.com/docs/native/geolocation/

https://github.com/apache/cordova-plugin-geolocation

https://www.npmjs.com/package/cordova-plugin-geolocation

https://techionichybride.blogspot.my/2017/09/how-to-reduce-white-screen-after-splash.html

Xcode 7.3.1 with iOS 10 support
 

import { Component, ViewChild, ElementRef} from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation'

 declare var google: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
   @ViewChild('map') mapElement: ElementRef;
   map: any;

  lat: any;
  lng: any;

  markers = [];
  marker : any;

  constructor(public navCtrl: NavController, public geo: Geolocation, public platform: Platform) {
    platform.ready().then(()=>{
      this.initMap();
    });
  }

  initMap(){

    //get the latest object position 

    this.geo.getCurrentPosition(
      { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }
    ).then( pos => {
      this.lat = pos.coords.latitude;
      this.lng = pos.coords.longitude;

     let mylocation = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude);
    
      this.map = new google.maps.Map(this.mapElement.nativeElement, {
      zoom: 21,
      center: mylocation });

    } 
    ).catch( err => {
      console.log( err );
    });

    //watch if object move

    let watch = this.geo.watchPosition({
      enableHighAccuracy: true,
      timeout: 5000,
      maximumAge: 0
    });

    watch.subscribe((data) => {

      this.lat = data.coords.latitude;
      this.lng = data.coords.longitude;

      
      this.deleteMarkers();
      //this.marker.setMap(null);

      
      let updatelocation = new google.maps.LatLng(data.coords.latitude,data.coords.longitude);
      let image = 'http://maps.google.com/mapfiles/ms/icons/truck.png';
      
      //this.map.setCenter({"lat": this.lat, "lng": this.lng});
    
      this.addMarker(updatelocation,image);
      this.setMapOnAll(this.map);

   
      

    });

  }

  addMarker(location, image) {
    let marker = new google.maps.Marker({
      position: location,
      map: this.map,
      icon: image
    });
    //this.map.setCenter(location);
    this.markers.push(marker);
    
  }
  
  setMapOnAll(map) {
    for (var i = 0; i < this.markers.length; i++) {
      this.markers[i].setMap(map);
    }
  }
  
  clearMarkers() {
    this.setMapOnAll(null);
  }
  
  deleteMarkers() {
    this.clearMarkers();
    this.markers = [];
  }

  

}//close class