Untitled

<!DOCTYPE html>
<html>
  <head>
    <title>Distance Matrix service</title>
    <script data-require="angular.js@*" data-semver="1.2.0-rc2" src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script src="angular-google-distance.js"></script>
    <script src="script.js"></script>
  </head>
  <body ng-app="myApp">
    <div ng-controller="MainController">
      <div id="inputs">
        <pre>
          $scope.origins = ['Vancouver BC', 'Seattle'];
          $scope.destinations = ['San Francisco', '34.05, -118.25'];
        </pre>
      </div>
       <p>{{data || "loading..."}}</p>
    </div>
  </body>
</html>

var myApp = angular.module('myApp',['angular.google.distance']);

myApp.controller('MainController', function($scope, GoogleDistanceAPI){
  
  $scope.origins = ['Vancouver BC', 'Seattle'];
  $scope.destinations = ['San Francisco', '34.05, -118.25'];
  

  var args = {
    origins: $scope.origins,
    destinations: $scope.destinations
  };
    
  $scope.data = GoogleDistanceAPI
      .getDistanceMatrix(args)
      .then(function(distanceMatrix) {
        return distanceMatrix;
      })
      
});

/* Styles go here */

'use strict';

angular.module('angular.google.distance', [])
    .value('googleMaps', google.maps)
    .provider('GoogleDistanceAPI', function() {

        var defaults = {
            unitSystem: null,
            durationInTraffic: false,
            avoidHighways: false,
            avoidTolls: false
        };

        this.$get = function($rootScope, $q, googleMaps, $window) {
            var _travelModes = [];
            var _unitSystems = [];

            _travelModes.driving = googleMaps.TravelMode.DRIVING;
            _travelModes.bicycling = googleMaps.TravelMode.BICYCLING;
            _travelModes.transit = googleMaps.TravelMode.TRANSIT;
            _travelModes.walking = googleMaps.TravelMode.WALKING;
            
            _unitSystems.metric = googleMaps.UnitSystem.METRIC;
            _unitSystems.imperial = googleMaps.UnitSystem.IMPERIAL;

            function exec(args) {
                var req = angular.copy(defaults, {});
                angular.extend(req, args);
                var deferred = $q.defer();
                var elem, service;

                function callback(results, status) {
                    if (status === googleMaps.DistanceMatrixStatus.OK || status === googleMaps.DistanceMatrixStatus.ZERO_RESULTS) {
                        $rootScope.$apply(function() {
                            return deferred.resolve(results);
                        });
                    } else {
                        $rootScope.$apply(function() {
                            return deferred.reject(status);
                        });
                    }
                }
                if (req.map) {
                    elem = req.map;
                } else if (req.elem) {
                    elem = req.elem;
                } else {
                    elem = $window.document.createElement('div');
                }
                service = new googleMaps.DistanceMatrixService();
                service.getDistanceMatrix(req, callback);
                return deferred.promise;
            }

            return {
                getDistanceMatrix: function(args) {
                    args.travelMode = _travelModes[args.travelMode] || googleMaps.TravelMode.DRIVING;
                    args.unitSystem = _unitSystems[args.unitSystem] || googleMaps.UnitSystem.METRIC;
                    return exec(args);
                }
            };
        };

        this.$get.$inject = ['$rootScope', '$q', 'googleMaps', '$window'];

});