title: Implement google map directions using angular-google-map in ionic
body: <p>I am using angular-google-map for my application. I manage to get my current location and my desired location to go. My problem now is I wanted to show the direction between this two location. Please guide me on how to implement the direction. Below is my code.</p>
  
  <p>location-map-ctrl.js</p>
  
  <pre><code>(function () {
      'use strict';
  
      angular.module('eliteApp').controller('LocationMapCtrl', ['$stateParams', 'eliteApi', LocationMapCtrl]);
  
      function LocationMapCtrl($stateParams, eliteApi) {
          var vm = this;
  
          vm.location_id = Number($stateParams.id);
  
          vm.map = {
              center: {
                  latitude: 38.897677,
                  longitude: -77.036530,
              },
              zoom: 12,
              control: { },
          };
          vm.marker = { },
  
          eliteApi.getLeagueData().then(function(data){
  
              vm.location = _.find(data.locations, { id: vm.location_id });
              vm.marker = {
                  latitude: vm.location.latitude,
                  longitude: vm.location.longitude,
                  title: vm.location.name + "&lt;br/&gt;(Tap for directions)",
                  showWindow: true
              };
  
              vm.map.center.latitude = vm.location.latitude;
              vm.map.center.longitude = vm.location.longitude;
  
          }   );
  
          vm.locationClicked = function(marker){
  
              navigator.geolocation.getCurrentPosition(function(pos) {
              // vm.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
  
              }, function(error) {
                alert('Unable to get location: ' + error.message);
              });
          };
      };
  })();
  </code></pre>
  
  <p>location-map.html</p>
  
  <pre><code>&lt;ion-view title="{{vm.location.name}}" ng-controller="LocationMapCtrl as vm"&gt;
    &lt;ion-content class="has-header"&gt;
      &lt;google-map draggable="true" center="vm.map.center" zoom="vm.map.zoom"&gt;
          &lt;marker coords="vm.marker" click="vm.locationClicked(vm.marker)"&gt;
              &lt;marker-label content="vm.marker.title" anchor="10 -8" class="marker-labels"&gt;&lt;/marker-label&gt;
          &lt;/marker&gt;
      &lt;/google-map&gt;
    &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>