CODEWITHSUNDEEP
androidangularionic-frameworkionic4
Michael de Borst
Michael de Borst

Reputation: 312

Request geolocation in ionic 4

I'm trying to get coordinates of my device location using the cordova geolocation plugin. When running the app on android (10), I get prompted for location permissions which I set to always allow and after that my getLocation function gets executed but I don't get any of the additional feedback which I programmed in to suggest that it has actually received coordinates. For the moment don't focus on the loadMap component, my focus currently is to retrieve coordinates,

I already did the import in app.module.ts This is my home.page.ts (For debug purposes I chained together the loadMap function and getLocation function to make sure the getLocation function gets executed (which it does judging by the begin location flow message I receive)

import { Component, ViewChild } from '@angular/core';
import { Geolocation} from '@ionic-native/geolocation/ngx';
// Import classes from maps module
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  LatLng,
  MarkerOptions,
  Marker
} from '@ionic-native/google-maps';

import { Platform, NavController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
lat;
lng;
  constructor( public platform: Platform, public nav: NavController, private geolocation: Geolocation ) {

  }

  ngAfterViewInit() {

    this.platform.ready().then( () => {

      this.loadMap();

    });
    this.getLocation();
  }
  loadMap() {
    console.log('map render start');
    let map = GoogleMaps.create( 'map' );

    map.one( GoogleMapsEvent.MAP_READY ).then( ( data: any ) => {

      let coordinates: LatLng = new LatLng( 50.7783, 119.4179 );

      let position = {
        target: coordinates,
        zoom: 14
      };

      map.animateCamera( position );

      let markerOptions: MarkerOptions = {
        position: coordinates,
        icon: "assets/images/marker.png",
        title: 'Hello California'
      };

      const marker = map.addMarker( markerOptions )
          .then( ( marker: Marker ) => {
            marker.showInfoWindow();
          });
    });
    this.getLocation();
  }

  getLocation() {
    console.log('begin location flow');
    this.geolocation.getCurrentPosition().then((resp) => {
  // resp.coords.latitude
  // resp.coords.longitude
    this.lat = resp.coords.latitude;
    this.lng = resp.coords.longitude;
    alert('lat' + this.lat + 'lon' + this.lng);
    console.log('location succes');
}).catch((error) => {
  console.log('Error getting location', error);
});
  }
}

Upvotes: 0

Views: 826

Answers (2)

Evan Thomas
Evan Thomas

Reputation: 205

you need to move the method your calling that makes use of the native plugin into the platform ready promise call back. Native plugins cannot be used until this fires.

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

Upvotes: 1

thedude
thedude

Reputation: 27

Based on your code above, you're calling this.getLocation() twice, as you pointed out, however, the first/initial this.getLocation() call gets run probably before this.platform.ready() (see ngAfterViewInit() routine).

Could this cause a conflict?

Upvotes: 0

Related Questions