ionic-team / ionic-native-google-maps

Google maps plugin for Ionic Native
Other
221 stars 125 forks source link

The new marker has updated its location but old marker not remove in ionic native google map #363

Open GhoshWorld opened 2 years ago

GhoshWorld commented 2 years ago

The marker is updating to new position and set a new marker but problem with old position marker not remove. marker.remove() not work under this if condition. How I remove old marker? any solution please. here is my code =>


loadMap() {

this.map = GoogleMaps.create('map_canvas', {
  controls: {
    myLocationButton : true,
    myLocation : true
  },
  camera: {
    target: {
      lat: this.latitude, lng: this.longitude
    },
    zoom: 18,
    tilt: 30
  },
});

this.map.addMarker({
  position: { lat: this.latitude, lng: this.longitude },
  draggable: true,
  disableAutoPan: true,
  icon: 'blue',
  title: 'Avirup'
}).then((marker: Marker) => {
  marker.showInfoWindow();

const subscription = this.geolocation.watchPosition().subscribe(position => {
  let geoposition = (position as Geoposition);
  let latitude = geoposition.coords.latitude;
  let longitude = geoposition.coords.longitude;
  let marker : Marker
    marker = this.map.addMarkerSync({
    position: { lat: latitude, lng: longitude },
    draggable: true,
    disableAutoPan: true,
    icon: { url: './assets/image/addresspin.png' ,
    size: {
        width: 30 ,
        height: 30
    }},
    title: 'Move'
  })
  marker.showInfoWindow();
   if(marker.getPosition().lat == latitude && marker.getPosition().lng == longitude){
    marker.remove()
  }
})
} ```
GhoshWorld commented 2 years ago

This work only change some code. We can change addMarkerSync to addMarker event. ::

watchPosition() {

 this.geolocation.watchPosition().subscribe(position => {
  let geoposition = (position as Geoposition);
  let latitude = geoposition.coords.latitude;
  let longitude = geoposition.coords.longitude;
  this.map.addMarker({
    position: { lat: latitude, lng: longitude },
    draggable: true,
    disableAutoPan: true,
    icon: {
      url: './assets/image/addresspin.png',
      size: {
        width: 30,
        height: 30
      }
    },
    title: 'Avirup Move'

  }).then((marker: Marker) => {

    if (marker) {
      setTimeout(() => {
        marker.remove()
      }, 1000)
    } else {
      console.log("marker", marker)
      marker.showInfoWindow();
      marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
        console.log("markeron")
      });
      marker.trigger(GoogleMapsEvent.MARKER_CLICK);
    }
  });
})

}