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?

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?

• javascript
• google-maps-api-3
• ionic-framework
• frameworks

Share Improve this question Follow edited Apr 25, 2017 at 6:18 Manfred Radlwimmer 13.4k1313 gold badges5555 silver badges6464 bronze badges asked Apr 22, 2017 at 4:46 Roshan MuleRoshan Mule 1111 silver badge66 bronze badges 4

• pubnub./blog/… – Edison Augusthy Commented Apr 22, 2017 at 4:55
• Thanks Edison, But i have one question , It is really possible only by using google api? If i dont want to use additional dependencies then what is the way to achieve that? – Roshan Mule Commented Apr 22, 2017 at 5:17
• watchPosition() function from Google Maps API. It returns all information you need to change markers in your map. – sudodev Commented Apr 22, 2017 at 5:29
• @Cristiano. .. can you please suggest me some example for better understanding? Thanks! – Roshan Mule Commented Apr 22, 2017 at 5:48

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

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.

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);
}