angular-google-maps directions example with directions list

var app = angular.module('plunker', ['google-maps']);

app.controller('MainCtrl', function($scope, $document) {
  // map object
  $scope.map = {
    control: {},
    center: {
        latitude: -37.812150,
        longitude: 144.971008
    },
    zoom: 14
  };
  
  // marker object
  $scope.marker = {
    center: {
        latitude: -37.812150,
        longitude: 144.971008
    }
  }
  
  // instantiate google map objects for directions
  var directionsDisplay = new google.maps.DirectionsRenderer();
  var directionsService = new google.maps.DirectionsService();
  var geocoder = new google.maps.Geocoder();
  
  // directions object -- with defaults
  $scope.directions = {
    origin: "Collins St, Melbourne, Australia",
    destination: "MCG Melbourne, Australia",
    showList: false
  }
  
  // get directions using google maps api
  $scope.getDirections = function () {
    var request = {
      origin: $scope.directions.origin,
      destination: $scope.directions.destination,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function (response, status) {
      if (status === google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        directionsDisplay.setMap($scope.map.control.getGMap());
        directionsDisplay.setPanel(document.getElementById('directionsList'));
        $scope.directions.showList = true;
      } else {
        alert('Google route unsuccesfull!');
      }
    });
  }
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="google-maps@1.0.0" data-semver="1.0.0" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
    <script data-require="lodash-underscore@*" data-semver="2.4.1" src="https://rawgit.com/lodash/lodash/2.4.1/dist/lodash.underscore.min.js"></script>
    <script data-require="angular-google-maps@*" data-semver="1.1.4" src="https://rawgit.com/nlaplante/angular-google-maps/1.1.4/dist/angular-google-maps.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div class="panel panel-default">
      <div class="panel-body">
        <google-map control="map.control" center="map.center" zoom="map.zoom">
          <marker coords="marker.center"></marker>
        </google-map>
        <form class="form-horizontal" role="form">
          <div class="form-group">
            <label for="origin" class="col-sm-2 control-label">Origin</label>
            <div class="col-sm-8">
              <input type="text" id="origin" class="form-control" ng-model="directions.origin" />
            </div>
          </div>
          <div class="form-group">
            <label for="destination" class="col-sm-2 control-label">Destination</label>
            <div class="col-sm-8">
              <input type="text" id="destination" class="form-control" ng-model="directions.destination" />
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-8">
              <button class="btn btn-primary" ng-click="getDirections()">Get Directions</button>
            </div>
          </div>
        </form>
        
        <div id="directionsList" ng-show="directions.showList" class="panel panel-primary"></div>
      </div>
    </div>
  </body>

</html>

/* Put your css in here */

.angular-google-map-container {
  height: 400px;
  margin-bottom: 15px;
}

.panel-primary {
  padding: 15px;
}