карты направления альтернативы

angular.module('ngMap')
  .run(function ($rootScope, NgMap,$timeout) {

    $rootScope.travelMode = "";
    $rootScope.destination = "";
    $rootScope.origin = "";


    NgMap.getMap().then(function (mapInstance) {
      $rootScope.map = mapInstance;
      $rootScope.updateRoutes();
    });



    $rootScope.updateRoutes = function() {
      var directionsService = new google.maps.DirectionsService();
      var request = {
        travelMode: $rootScope.travelMode,
        origin: $rootScope.origin,
        destination: $rootScope.destination,
        provideRouteAlternatives: true
      };

      directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          //$timeout(function () {
            response.routes.forEach(function (route, i) {
              new google.maps.DirectionsRenderer({
                map: $rootScope.map,
                directions: response,
                routeIndex: i
              });
            });
          //});

        }
      });


    };

  });

html,
    body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0
    }
    
    body {
      padding: 5px
    }
    
    * {
      box-sizing: border-box;
    }

<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>

<div ng-app="ngMap">
  <div style="width: 68%; float:left; height: 100%">
    <b>Origin </b>
    <select ng-model="origin" ng-init="origin='chicago, il'" ng-change="updateRoutes()">
        <option value="chicago, il">Chicago</option>
        <option value="st louis, mo">St Louis</option>
        <option value="joplin, mo">Joplin, MO</option>
        <option value="oklahoma city, ok">Oklahoma City</option>
        <option value="amarillo, tx">Amarillo</option>
        <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
      </select>

    <b>Destionation </b>
    <select ng-model="destination" ng-init="destination='chicago, il'" ng-change="updateRoutes()">
        <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
      </select>

    <b>Mode of Travel: </b>
    <select ng-model="travelMode" ng-init="travelMode='DRIVING'" >
        <option value="DRIVING">Driving</option>
        <option value="WALKING">Walking</option>
        <option value="BICYCLING">Bicycling</option>
        <option value="TRANSIT">Transit</option>
      </select>

    <ng-map zoom="14" center="37.7699298, -122.4469157" style="height:90%" >
      <directions draggable="true" panel="directions-panel" travel-mode="{{travelMode}}" origin="{{origin}}"
        destination="{{destination}}">
      </directions>
    </ng-map>
  </div>


</div>