Unable to refreshing location using google maps javascript api


#1

When i use WatchPosition() instead of getCurrentPosition() it refreshes map… I want to move marker smoothly only.

ionViewDidLoad() {
this.loadMap();
}

// Code For Getting Current Position //
loadMap() {
let loading = this.loadingCtrl.create({
spinner: ‘bubbles’,
content: ‘Map is loading…’
});
loading.present();
navigator.geolocation.watchposition(
(position) => {
console.log(position);
this.latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
this.lat = position.coords.latitude;
this.lan = position.coords.longitude;
this.geocoder = new google.maps.Geocoder();
this.geocoder.geocode({ ‘latLng’: this.latLng }, (results, status) => {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
console.log(results[1].formatted_address);
this.locat = results[1].formatted_address;
this.content = this.locat;
this.address.pickupplace = this.content;
}
}
this.showmap(this.latLng);
loading.dismiss();
})
}, (err) => {
console.log(err);
}
)
}

// Showing Map According to Current Position //
showmap(coordinates) {
this.coord = coordinates;
let mapOptions = {
center: this.coord,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
draggable: true
}
this.map = new google.maps.Map(document.getElementById(“map”), mapOptions);
this.addMarker(this.content);
this.addCluster();
}

addMarker(data) {
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.bounce,
position: this.map.getCenter()
});
this.content = data;
this.addInfoWindow(marker, this.content);
}