The marker is not updating to new position problem with marker.setposition()

[shivakumar116]

I am implenting an application named bus tracker app where user can find bus location

The main issue I am facing is whenever there is change in location the marker is not updating to new position i used marker. Setposition to update marker position

But the marker is not updating it is only updating only when I scroll map

My project link : https://github.com/shivakumar116/Track-In

[chadevans]

In my app, I target the marker directly like this and use the set function:

this.markers[0].set('position', coordinates)

[shivakumar116]

In my app, I target the marker directly like this and use the set function:

this.markers[0].set('position', coordinates)

will it automatically updates to new position ?

[chadevans]

It does for me - just use LatLng for the coordinates and target the marker you have captures in a variable. Pseudocode:

const coordinates: LatLng = new LatLng(latitude, longitude);
this.markers[0].set('position', coordinates);

[shivakumar116]

i tried above it is showing set is undefined

this is my code check it out this is my first application

import { Router } from '@angular/router';
import { DbusnoService } from './../dbusno.service';
import { DbusnoPage } from './../dbusno/dbusno.page';
import { AngularFirestore } from '@angular/fire/firestore';
import { Component, ViewChild, ElementRef } from '@angular/core';
import { Platform, NavController } from "@ionic/angular";
import { Geolocation } from '@ionic-native/geolocation/ngx'
import { AngularFirestoreModule, AngularFirestoreCollection, AngularFirestoreDocument } from '@angular/fire/firestore';
import { AngularFireStorageModule, AngularFireStorage } from '@angular/fire/storage';
import { firestore } from "firebase/app";
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  LatLng,
  MarkerOptions,
  Marker
} from "@ionic-native/google-maps";
import { google } from 'google-maps'
import { Icon } from 'ionicons/dist/types/icon/icon';

declare var google;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  @ViewChild('map') mapElemet;

  map: any;
  lat: number;
  lon: number;
  busno: number;
  driverlocation: any;
  Firsttime: boolean = true;
  subscription: any;
  mark: Marker;

  constructor(public geo: Geolocation, public afs: AngularFirestore, public dbusnos: DbusnoService,
    public platform: Platform,
    public gmaps: GoogleMaps,
    public router: Router) {
  }

  ngAfterViewInit() {

    this.busno = this.dbusnos.getdbusno();
    console.log(this.busno);

    var options = { enableHighAccuracy: true };

    let watch = this.geo.watchPosition(options);
    this.subscription = watch.subscribe((data) => {

      this.lat = data.coords.latitude;
      this.lon = data.coords.longitude
      if (this.busno == null) {

      }
      else {
        this.afs.doc(`driverlocation/${this.busno}`).set({
          lat: data.coords.latitude,
          lon: data.coords.longitude,
          busno: this.busno,

        });

        this.platform.ready().then(() => {
          if (this.Firsttime == true) {

            this.loadMap();
            this.Firsttime = false;

          }
          else {

            this.addmarker();

          }
        });

      }
    })

  }

  loadMap() {
    this.map = GoogleMaps.create('map');

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

      let coordinates: LatLng = new LatLng(this.lat, this.lon);

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

      this.map.animateCamera(position);

      let ic = {
        url: "assets/icon/shivaicon.png",
        size: {
          width: 50,
          height: 40
        },
        anchor: [15, 15],
      };

      let markerOptions: MarkerOptions = {
        position: coordinates,
        icon: ic,
      }

      this.mark = this.map.addMarkerSync(markerOptions);
      this.addmarker();
      //.then((marker: Marker) => {
      //this.mark = marker;
      //});

      // this.mark.showInfoWindow();

    })
  }

  addmarker() {
    console.log("in add marker")
    let coordinates: LatLng = new LatLng(this.lat, this.lon);

    console.log(coordinates)

    this.mark.setPosition({
      lat: this.lat,
      lng: this.lon,
    });
    //this.mark.set('position', coordinates)

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

    // this.map.animateCamera(position);
    this.map.moveCamera(position);
  }

  deletebus() {
    this.subscription.unsubscribe()
    this.afs.doc(`driverlocation/${this.busno}`).delete();
    this.router.navigate(['/move'])
  }

  ionViewWillLeave() {
    this.subscription.unsubscribe()
    this.afs.doc(`driverlocation/${this.busno}`).delete();
  }
}

[chadevans]

I use mapAsync. Make sure to target the pin in the array and capture it globally.

this.geoLocData.mapAsync((element: any, callback: (marker: Marker) => void) => {
   this.map.addMarker(element).then(callback);
}).then((markers: Marker[]) => {
  this.geoLocPin = markers;
  this.geoLocWatch = this.geolocation.watchPosition().takeUntil(this.onLeave).subscribe(data => {
    this.geoLocPosition = new LatLng(data.coords.latitude, data.coords.longitude);
    this.geoLocPin[0].set('position', this.geoLocPosition);
  })
})

[shivakumar116]

@chadevans i fixed my issue instead of animatecamera i used movecamera it fixed my issue

can u tell me how to rotate marker based on the driver mobile position ?