How to avoid reloading map everytime I just want to update users position with marker?
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;
icon: any;
constructor(public geo: Geolocation, public afs: AngularFirestore, public dbusnos: DbusnoService,
public platform: Platform,
public gmaps: GoogleMaps) {
}
ngAfterViewInit() {
this.busno = this.dbusnos.getdbusno();
console.log(this.busno);
let watch = this.geo.watchPosition();
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.lat == 0 && this.lon == 0) {
}
else {
this.mapload()
}
});
}
})
}
addMarker() {
this.icon = {
url: "/assets/icon/bus.jpg", // url
scaledSize: new google.maps.Size(50, 50), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
let marker = new google.maps.Marker({
map: this.map,
// animation: google.maps.Animation.DROP,
position: this.map.getCenter(),
Icon: this.icon
});
let content = "<h4>Information!</h4>";
this.addInfoWindow(marker, content);
}
addInfoWindow(marker, content) {
let infoWindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(marker, 'click', () => {
infoWindow.open(this.map, marker);
});
}
mapload() {
let LatLng = new google.maps.LatLng(this.lat, this.lon)
let mapOptions = {
center: LatLng,
zoom: 15,
disableDefaultUI: true
};
this.map = new google.maps.Map(this.mapElemet.nativeElement, mapOptions)
this.addMarker();
}
}``