Googlemaps native get marker position after drag

Question

I am facing a strange issue on setting the new coordinates given by the 'on marker drag end' listener. When trying to set my variable this.lat and this.lng or even when trying to console log out them in the event listener i get the following error:

ERROR 
Error {rejection: TypeError, promise: t, zone: r, task: e, stack: (...)…}
message: "Uncaught (in promise): TypeError: Cannot set property 'lat' of undefined↵TypeError: Cannot set property 'lat' of undefined↵    at file:///android_asset/www/build/28.js:180:27↵    at t.invoke (file:///android_asset/www/build/polyfills.js:3:14976)↵    at Object.zone._inner.zone._inner.fork.onInvoke (file:///android_asset/www/build/vendor.js:4248:33)↵    at t.invoke (file:///android_asset/www/build/polyfills.js:3:14916)↵    at r.run (file:///android_asset/www/build/polyfills.js:3:10143)↵    at file:///android_asset/www/build/polyfills.js:3:20242↵    at t.invokeTask (file:///android_asset/www/build/polyfills.js:3:15660)↵    at Object.zone._inner.zone._inner.fork.onInvokeTask (file:///android_asset/www/build/vendor.js:4239:33)↵    at t.invokeTask (file:///android_asset/www/build/polyfills.js:3:15581)↵    at r.runTask (file:///android_asset/www/build/polyfills.js:3:10834)"
promise: t
rejection: TypeError
stack: (...)
get stack: function () { [native code] }
set stack: function () { [native code] }
task: e
zone: r
__proto__: d

Its like if the two variables are not reachable or i dont know. Tried debugging it for 3 hours now but without any luck. Maybe i am just not noticing something, so any help would be much appreaciated. The function in question is updatePosition everything else is working.

Here is my code:

import { Component } from '@angular/core';
import {IonicPage, NavController, NavParams, Platform} from 'ionic-angular';
import {HelperProvider} from "../../providers/helper/helper";
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  Marker, CameraPosition, ILatLng
} from '@ionic-native/google-maps';
import {Geolocation, GeolocationOptions} from "@ionic-native/geolocation";

@IonicPage()
@Component({
  selector: 'page-statement',
  templateUrl: 'statement.html',
})
export class StatementPage {

  map: GoogleMap;
  lat:any;
  lng:any;
  settlementLat:any;
  settlementLng:any;
  geoLocationOption: GeolocationOptions;
  showMap: boolean = false;

  constructor(
    public navCtrl: NavController,
    public platform: Platform,
    private geoLocation: Geolocation,
    private helper: HelperProvider,
    public navParams: NavParams) {

    const data = JSON.parse(localStorage.getItem('deviceData'));

    if(data.settlementLat && data.settlementLng){
      this.settlementLat = data.settlementLat;
      this.settlementLng = data.settlementLng;
    }

  }

  openMap(){
    this.showMap = true;
    setTimeout(()=> {this.loadMap()},500)
  }

  loadMap() {
    this.map = GoogleMaps.create('statementMap', {
      'camera': {
        'target': {
          "lat": parseFloat(this.settlementLat),
          "lng": parseFloat(this.settlementLng)
        },
        'zoom': 18
      }
    });

    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {

      this.geoLocationOption = {
        maximumAge: 0,
        timeout : 15000,
        enableHighAccuracy: true
      };

      this.helper.presentLoading('Searching for GPS position...');
      this.getPosition();
    });
  }

  getPosition(){
    this.geoLocation.getCurrentPosition(this.geoLocationOption).then((resp) => {
      this.helper.closeLoading();
      this.lat = resp.coords.latitude;
      this.lng = resp.coords.longitude;

      let position: CameraPosition<ILatLng> = {
        target: {
          lat: this.lat,
          lng: this.lng
        },
        zoom: 18
      };

      this.map.moveCamera(position);

      this.map.addMarker({
        icon: 'blue',
        animation: 'DROP',
        draggable: true,
        position: {
          lat: this.lat,
          lng: this.lng
        }
      }).then(this.updatePosition)

    }).catch((error) => {
      this.helper.closeLoading();
      this.map.destroy();
      this.helper.presentToast('Please turn on your gps...');
      this.showMap = false;
    });
  }

  updatePosition(marker: Marker){
    marker.one(GoogleMapsEvent.MARKER_DRAG_END).then(() => {
      this.lat = marker.getPosition().lat;
      this.lng = marker.getPosition().lng;

      console.log(this.lat);
      console.log(this.lng);
    });
  }

}

score 1 · Answer 1 · answered Dec 19 '17 at 10:19

try avoid an invalid use of this operator eg

    getPosition(){
      this.geoLocation.getCurrentPosition(this.geoLocationOption).then((resp) => {
        this.helper.closeLoading();
        var my_lat = resp.coords.latitude;
        var my_lng = resp.coords.longitude;

        let position: CameraPosition<ILatLng> = {
          target: {
            lat: this.lat,
            lng: this.lng
          },
          zoom: 18
        };

        this.map.moveCamera(position);

        this.map.addMarker({
          icon: 'blue',
          animation: 'DROP',
          draggable: true,
          position: {
            lat: my_lat,
            lng: my_lng
          }
        }).then(this.updatePosition)

      }).catch((error) => {
        this.helper.closeLoading();
        this.map.destroy();
        this.helper.presentToast('Please turn on your gps...');
        this.showMap = false;
      });
    }

the code suggest a solution for lat and lng only could be you have other problem on others improper use of this

Still wasnt abble to reach out to my this.lat and this.lng, but i removed my this.updatePosition and made a fat arrow function instead of that and suddenly those variables were reacheble again. So problem solved and thanks for the effort :) — trix87, Dec 21 '17 at 22:10

Googlemaps native get marker position after drag

1 Answers1