How to add live location tracking in ionic app

by

I want to add functionality like gmap navigation into ionic hybrid application like blue dot pointer also. Previously I used geolocation API but Location is not changed when I change my position (I seem static). I want to add the live location tracking like google map. Can anyone suggest me the right way?

37 thoughts on “How to add live location tracking in ionic app”

  1. You can just apply to your map property the native method setMyLocationEnabled(true).

    See my example:

    let element: HTMLElement = document.getElementById(‘map’);
    this.map = this.googleMaps.create(element);
    this.map.setMyLocationEnabled(true);

    This last line will active a native current position marker.

    Reply

  2. in my case, it can not find watchSuccess, watchError, watchOptions here is my code

          if (navigator.geolocation.watchPosition(watchSuccess, watchError, watchOptions)) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        map.setCenter(pos);
        that.MyLocation = new google.maps.LatLng(pos);

      }, function() {

      });
    } else {
      // Browser doesn't support Geolocation
    }

    directionsService.route({
    origin: this.MyLocation,
    destination: this.Destination,
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
  
}
// watch user's position
// change marker location everytime position is updated
 watchSuccess(position) {
    var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    // set marker position
    marker.setPosition(latLng);
}
    Reply

  4. Use watchPosition and change marker on map. Something like:

    var myMarker = null;

// get current position
navigator.geolocation.getCurrentPosition(showPosition);

// show current position on map
function showPosition(position) {
   myMarker = new google.maps.Marker({
      position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
      map: new google.maps.Map(document.getElementById("map")),
      icon: 'img/icons/myicon.png'
  });
}

// watch user's position
navigator.geolocation.watchPosition(watchSuccess, watchError, watchOptions);

// change marker location everytime position is updated
function watchSuccess(position) {
    var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    // set marker position
    marker.setPosition(latLng);
}

    You can also use $cordovaGeolocation plugin. Take a look at plugin docs.

    getCurrentPosition returns current position of Geolocation

    watchPosition returns current position every time it changes. So, with this function, you can change the marker on map everytime with setPosition and pass coordinates to it.

    Reply

Leave a Comment