3

I am using Angularjs with IonicFramework and ng-map. I have read all the documentation here (link), but I don't find how can I show to the user the best way (or a simple way) to go to the user current position to another.

I have read this too and this, but I would like to use angular.

Filburt
  • 17,626
  • 12
  • 64
  • 115
chemitaxis
  • 13,889
  • 17
  • 74
  • 125

2 Answers2

3

This is what I do and works ;)

$scope.centerOnMe= function(){
    $scope.positions = [];


    $ionicLoading.show({
      template: 'Obteniendo localización...'
    });



    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      $scope.positions.push({lat: pos.k,lng: pos.B});
      console.log(pos);
      $scope.map.setCenter(pos);
      $ionicLoading.hide();




      var directionsDisplay = new google.maps.DirectionsRenderer();;
      var directionsService = new google.maps.DirectionsService();


      console.log($scope.map);
      directionsDisplay.setMap($scope.map);

      function calcRoute() {
        var start = "37.891586,-4.7844853";
        var end = pos.k + "," + pos.B;



        var request = {
          origin: start,
          destination: end,
          optimizeWaypoints: true,
          travelMode: google.maps.TravelMode.DRIVING
        };

        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);            
            console.log('enter!');  
          }
        });


      }

      calcRoute();


    });
chemitaxis
  • 13,889
  • 17
  • 74
  • 125
  • ng-map now have directions api implemted – allenhwkim Apr 10 '15 at 18:56
  • https://ngmap.github.io/#/!directions2.html – Abdul Aleem Mar 03 '16 at 06:30
  • @chemitaxis HI, I am using your code which seem to work fine but when my controller is loaded. I am getting an error "InvalidValueError: setMap: not an instance of Map" . because of that when i'm calculating the route between two points. I reached at the success stage of calculateRoute() function('enter!' printed in console) but route is not shown in map. – Ali Usmaan Apr 07 '16 at 09:56
2

I would try angular-ui-maps https://angular-ui.github.io/angular-google-maps/#!/api

and the google directions api: https://developers.google.com/maps/documentation/directions/

With the google directions api you could get the waypoints for your trip and then paint it on the maps canvas with the polylines directive.

Johannes Reichard
  • 937
  • 5
  • 20