Ionic Google Map Native Geolocation Plugin Update Userposition

Hello i try to update the user positon in my google map using the geolocation plugin.
i used the example in the ionic docs and tried to adapt to my need.
Unfortunately, i didnt see any change on the marker if im moving the position of my device.

    private selfmarker: Marker;

    this.map.one(GoogleMapsEvent.MAP_READY).then(
            () => {
                this.geoLocation.getCurrentPosition().then((resp) => {
                    let userPosition: LatLng = new LatLng(resp.coords.latitude, resp.coords.longitude);
                    let position: CameraPosition = {
                        target: userPosition,
                        zoom: 15,
                        tilt: 0
                    };

                    this.map.moveCamera(position);
                    this.addSelfMarkerOnMap(userPosition);
                    const subscription = this.geoLocation.watchPosition()
                        .filter((p) => p.coords !== undefined) //Filter Out Errors
                        .subscribe(position => {
                            this.selfmarker.remove(); 
                           let markerOptions: MarkerOptions = {
                                // after console.log(position.coords.latitude,position.coords.longitude) it show every x seconds 
                               //updated position
                                position: new LatLng(position.coords.longitude, position.coords.latitude),
                            };
                            this.map.addMarker(markerOptions).then((marker) => { this.selfmarker = marker; });
                            // I Tried to change the position of the marker directly in the map 
                           // this.selfmarker.setPosition(new LatLng(position.coords.longitude, position.coords.latitude));
                        }); 

                }).catch((error) => {
                    console.log('Error getting location', error);
                });

            }
        );

    /* The marker at the start of the application is working */
    private addSelfMarkerOnMap(userPosition: any) {
       
        let markerOptions: MarkerOptions = {
            position: markerPosition,
            icon: markerIcon
        };
        this.map.addMarker(markerOptions).then((marker) => { this.selfmarker = marker; });
    }

I resolved this with this link.
https://stackoverflow.com/questions/8521766/google-maps-api-3-remove-selected-marker-only
I have adapted the solution for ionic3

private selfmarker: Marker;
loadMap() {
        let element: HTMLElement = document.getElementById('map');
        this.map = this.googleMaps.create(element);
        // listen to MAP_READY event
        // You must wait for this event to fire before adding something to the map or modifying it in anyway
        this.map.one(GoogleMapsEvent.MAP_READY).then(
            () => {
                
                this.geoLocation.getCurrentPosition().then((resp) => {
                    let pos: CameraPosition = {
                        target: new LatLng(resp.coords.latitude, resp.coords.longitude),
                        zoom: 12,
                        tilt: 0
                    };
                    this.map.moveCamera(pos);
                });

                const subscription = this.geoLocation.watchPosition()
                    .filter((p) => p.coords !== undefined) //Filter Out Errors
                    .subscribe(position => {
                        let userPosition: LatLng = new LatLng(position.coords.latitude, position.coords.longitude);
                        if (this.selfmarker != null) {
                            this.selfmarker.setPosition(userPosition);
                            this.map.addMarker(this.selfmarker);
                        } else {
                            let markerIcon = {
                                'url': 'https://lh3.googleusercontent.com/zPPRTrpL-rx7OMIqlYN63z40n',
                                'size': {
                                    width: 20,
                                    height: 20,
                                }
                            }
                            let markerOptions: MarkerOptions = {
                                position: userPosition,
                                icon: markerIcon
                            };
                             this.map.addMarker(markerOptions).then((marker) => { this.selfmarker = marker; });
                        }
                    });
            }
        );
    }
4 Likes

Great solution, thank you. I’ve also tried it to set position to this.selfmarker without this.map.addMarker(this.selfmarker); and it worked for me also…

if (this.selfmarker != null) {
this.selfmarker.setPosition(userPosition);
}

1 Like

What is this url link how can we get this?