Google map icon not updating its position on map in Android but works well in browser

@shiva11629 wrote:

Hello everyone I am using ionic native google-maps for my application. I used addmarkerSync to add marker and used setposition to update location but my marker is not updating its position in my app but it’s works well when I run in browser below is my code

import { AngularFirestore } from '@angular/fire/firestore';
import { Component, ViewChild } 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 { Observable } from 'rxjs/Observable'
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
LatLng,
MarkerOptions,
Marker
} from "@ionic-native/google-maps";
import { MapType } from '@angular/compiler';
import { Toast } from '@ionic-native/toast/ngx';
import { ToastController } from '@ionic/angular';
import { Router } from "@angular/router";

declare var google;

@component({
selector: 'app-userhome',
templateUrl: './userhome.page.html',
styleUrls: ['./userhome.page.scss'],
})
export class UserhomePage {
@ViewChild('map') mapElemet;

map: GoogleMap;
noofdrivers: number;
latfromdb: number;
lonfromdb: number;
busnum: number = null;
driverlocationRef: AngularFirestoreCollection
driverlocation$: Observable<driverlocation[]>
maininfo: driverlocation
Firsttime: boolean = true;
mark: Marker;
icon: any;
// bus = document.getElementById('bus').getElementsByTagName('input')[0];

constructor(public afs: AngularFirestore, public platform: Platform, public ubusnos: UbusnoService, private toast: Toast, public toastController: ToastController,
public router: Router) {
}

ngOnInit() {
}

ngAfterViewInit() {

this.busnum = this.ubusnos.getubusno();
let i = 0;
this.driverlocationRef = this.afs.collection(`driverlocation`);
this.driverlocation$ = this.driverlocationRef.valueChanges();
this.driverlocation$.subscribe(info => {
  this.maininfo = info[0];
  this.noofdrivers = info.length;
  console.log(this.noofdrivers)
  for (i = 0; i < this.noofdrivers; i++) {
    this.maininfo = info[i];
    console.log(this.maininfo.busno)
    if (this.maininfo.busno === this.busnum) {

      this.latfromdb = this.maininfo.lat;
      this.lonfromdb = this.maininfo.lon;

      break;
    }

    else {
      if (i + 1 == this.noofdrivers) {
        console.log(i)
        console.log("In Else Block")
        this.busnotonline();
      }
    }
  }

  this.platform.ready().then(() => {
    if (this.Firsttime == true) {
      this.loadMap();
      this.Firsttime = false;
    }
    else {
      this.marker();

    }
  });
})
}

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

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

  let coordinates: LatLng = new LatLng(this.latfromdb, this.lonfromdb);

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

  this.map.animateCamera(position);

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

  };

  let markerOptions: MarkerOptions = {
    position: coordinates,
    icon: this.icon,

  }

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


  //   this.mark.showInfoWindow()


})
}

marker() {

let coordinates: LatLng = new LatLng(this.latfromdb, this.lonfromdb);

this.mark.setPosition(coordinates);


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

this.map.animateCamera(position);
}

async busnotonline() {
const toast = await this.toastController.create({
message: 'Bus number ' + this.busnum + ' is currently offline ',
duration: 3000,
position: 'bottom'
});
toast.present();
this.router.navigate(['/ubusno'])
}

}
`

Posts: 1

Participants: 1

Read full topic