CODEWITHSUNDEEP
google-maps-api-3ionic2google-geolocation
RSA
RSA

Reputation: 1449

How to move marker over map in ionic2?

In this code I try to move marker as I change location but it seems something is wrong.marker is not replacing. 

declare var google;
@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html',
  providers: [Geolocation]
})
export class Page1 {
  @ViewChild('map') mapElement: ElementRef;
  map: any;
  public marker =[];
  public lat;
  public lng;
  public speed = '0';
  public watch: any;

  constructor(public navCtrl: NavController, public Geolocation: Geolocation, public zone: NgZone,
  ){      }
ionViewDidLoad(){
  this.loadMap();
  this.startTracking();        
  }
  loadMap(){
          this.Geolocation.getCurrentPosition().then((position) => {
      let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

      let mapOptions = {
        center: latLng,
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }     
      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
 this.addMarker();
    }, (err) => {
      console.log(err);
    });      
  }

  startTracking() {
  let config = {
    desiredAccuracy: 0,
    stationaryRadius: 20,
    distanceFilter: 10, 
    debug: true,
    interval: 2000 
  };     
let options = {
  frequency: 3000, 
  enableHighAccuracy: true
};     
this.watch = this.Geolocation.watchPosition(options).filter((p: any) => p.code === undefined).subscribe((position: Geoposition) => {
  this.zone.run(() => {
    this.lat = position.coords.latitude;
    this.lng = position.coords.longitude;
    this.marker[0].lat= position.coords.latitude;
    this.marker[0].lng= position.coords.longitude;
    this.speed =( +position.coords.speed*3.6 ) + 'Km/h';
  });

});

}
addMarker(){

 let marker = new google.maps.Marker({
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: this.map.getCenter()
  });

 this.marker.push(marker);
 console.log(this.marker);
}
}

}

Upvotes: 3

Views: 2466

Answers (1)

Swapnil Patwa
Swapnil Patwa

Reputation: 4089

Use setPosition to move marker. Try this

this.zone.run(() => {
    this.lat = position.coords.latitude;
    this.lng = position.coords.longitude;

    this.marker.setPosition( { lat: this.lat, lng: this.lng });

    this.speed =( +position.coords.speed*3.6 ) + 'Km/h';
  });

Upvotes: 2

Related Questions