import { Component, NgZone } from '@angular/core'; import { Geolocation } from '@ionic-native/geolocation/ngx'; import { NativeGeocoder, NativeGeocoderOptions, NativeGeocoderResult } from '@ionic-native/native-geocoder/ngx'; import { Platform } from '@ionic/angular'; declare var google; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { userLocation; userCity; lat; lng; location; latLngResult; userLocationFromLatLng; constructor(public zone: NgZone, public geolocation: Geolocation, private nativeGeocoder: NativeGeocoder, private platform: Platform) { this.initializeApp(); } initializeApp() { this.platform.ready().then(() => { this.getUserLocation(); }); } getUserLocation() { this.geolocation.getCurrentPosition().then((resp) => { // this.getGeoLocation(resp.coords.latitude, resp.coords.longitude) if (this.platform.is('cordova')) { let options: NativeGeocoderOptions = { useLocale: true, maxResults: 5 }; this.nativeGeocoder.reverseGeocode(resp.coords.latitude, resp.coords.longitude, options) .then((result: any) => { console.log(result) this.userLocation = result[0] console.log(this.userLocation) }) .catch((error: any) => console.log(error)); } else { this.getGeoLocation(resp.coords.latitude, resp.coords.longitude) } }).catch((error) => { }); let watch = this.geolocation.watchPosition(); watch.subscribe((data) => { // data can be a set of coordinates, or an error (if an error occurred). // data.coords.latitude // data.coords.longitude let options: NativeGeocoderOptions = { useLocale: true, maxResults: 5 }; if (this.platform.is('cordova')) { let options: NativeGeocoderOptions = { useLocale: true, maxResults: 5 }; this.nativeGeocoder.reverseGeocode(data.coords.latitude, data.coords.longitude, options) .then((result: NativeGeocoderResult[]) => { console.log(result) this.userLocation = result[0] console.log(this.userLocation) }) .catch((error: any) => console.log(error)); } else { console.log('not cordove') this.getGeoLocation(data.coords.latitude, data.coords.longitude) } }); } async getGeoLocation(lat: number, lng: number, type?) { if (navigator.geolocation) { let geocoder = await new google.maps.Geocoder(); let latlng = await new google.maps.LatLng(lat, lng); let request = { latLng: latlng }; await geocoder.geocode(request, (results, status) => { if (status == google.maps.GeocoderStatus.OK) { let result = results[0]; this.zone.run(() => { if (result != null) { this.userCity = result.formatted_address; if (type === 'reverseGeocode') { this.latLngResult = result.formatted_address; } } }) } }); } } reverseGeocode(lat, lng) { if (this.platform.is('cordova')) { let options: NativeGeocoderOptions = { useLocale: true, maxResults: 5 }; this.nativeGeocoder.reverseGeocode(lat, lng, options) .then((result: NativeGeocoderResult[]) => this.userLocationFromLatLng = result[0]) .catch((error: any) => console.log(error)); } else { this.getGeoLocation(lat, lng, 'reverseGeocode'); } } forwardGeocode(address) { if (this.platform.is('cordova')) { let options: NativeGeocoderOptions = { useLocale: true, maxResults: 5 }; this.nativeGeocoder.forwardGeocode(address, options) .then((result: NativeGeocoderResult[]) => { this.zone.run(() => { this.lat = result[0].latitude; this.lng = result[0].longitude; }) }) .catch((error: any) => console.log(error)); } else { let geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address': address }, (results, status) => { if (status == google.maps.GeocoderStatus.OK) { this.zone.run(() => { this.lat = results[0].geometry.location.lat(); this.lng = results[0].geometry.location.lng(); }) } else { alert('Error - ' + results + ' & Status - ' + status) } }); } } }