Web Programming examples

Google Maps,AngularJS

Google Maps for AngularJS Directions Service Draggable(v2.4.1)

  • AngularJS : 1.6.5
  • Google Maps for AngularJS : 2.4.1
  • include file
  • angular.min.js, lodash.underscore.min.js, angular-simple-logger.min.js,angular-google-maps.min.js
(Ctrl-Click for multiple selection)
  • Route{{route.title}}
    From:{{route.start}}
    To:{{route.end}}
    Distance:{{route.distance}}

  • Total Distance:{{map.total}}
  • <div ng-controller="MyCtrl">
      <div class="row">
        <div class="col-sm-6">
          <ui-gmap-google-map 
            id="map-canvas"
            center="map.center"
            zoom="map.zoom"
            draggable="true"
            options="map.options"
            control="map.control"
          >
          </ui-gmap-google-map>
        </div>
        <div class="col-sm-6">
          <form class="form-horizontal" role="form">
            <div class="form-group">
              <label class="col-sm-4 control-label">Start</label>
              <div class="col-sm-8">
                <select class="form-control" ng-model="routePoints.start" 
                        ng-options="route.name for route in map.routes.start">
                </select>
              </div>
            </div>
    <i>(Ctrl-Click for multiple selection)</i> <br>
            <div class="form-group">
              <label class="col-sm-4 control-label">WayPoints</label>
              <div class="col-sm-8">
                <select multiple class="form-control" ng-model="routePoints.ways" 
                        ng-options="route.name for route in map.routes.ways">
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-4 control-label">End</label>
              <div class="col-sm-8">
                <select class="form-control" ng-model="routePoints.end" 
                        ng-options="route.name for route in map.routes.end">
                </select>
              </div>
            </div>
            <button ng-click="calcRoute(routePoints)" type="submit" class="btn btn-default">Submit</button>
          </form>
          <li ng-repeat="route in routesDisplay">
          Route{{route.title}}<br />From:{{route.start}}<br />To:{{route.end}}<br />Distance:{{route.distance}}<br /><br />
          </li>
          <li>Total Distance:{{map.total}}</li>
        </div>
      </div>
    </div>
    
    var mapApp = angular.module('googleMapApp', ['uiGmapgoogle-maps']);
    
    mapApp.config(
        ['uiGmapGoogleMapApiProvider', function(GoogleMapApiProviders) {
            GoogleMapApiProviders.configure({
              key: 'your Google Map api key',
              v: '3', //defaults to latest 3.X anyhow
              libraries: 'weather,geometry,visualization'
            });
        }]
    );
    
    mapApp.controller("MyCtrl",['$scope', 'uiGmapGoogleMapApi', function ($scope,uiGmapGoogleMapApi) {
      angular.extend($scope, {
        map: {
          center: {
            latitude: 35.6813,
            longitude: 139.7660
          },
          options: {
            maxZoom: 20,
            minZoom: 3
          },
          zoom: 15,
          control: {},
          total: {},
          routes: {
            start: [
              {name:'Tokyo Station', latlng:'35.6813,139.7660'},
              {name:'Ootemathi Station', latlng:'35.6842,139.7629'}
            ],
            ways: [
              {name:'Ootemon', latlng:'35.6856,139.7612'},
              {name:'Nijyubashi', latlng:'35.6794,139.7577'},
              {name:'Tokyo Tower', latlng:'日本, 東京都港区芝公園4-2-8'},
              {name:'Hama-rikyu Gardens', latlng:'日本, 東京都中央区浜離宮庭園1-1'}
            ],
            end: [
              {name:'Tokyo Station', latlng:'35.6813,139.7660'},
              {name:'Ootemathi Station', latlng:'35.6842,139.7629'}
            ]
          }
        },
        routePoints: {
          start: {},
          end: {}
        },
        routesDisplay: []
      });
      $scope.routePoints.start = $scope.map.routes.start[0];
      $scope.routePoints.end = $scope.map.routes.end[1];
    
      var rendererOptions = {
        draggable: true
      };
    
      uiGmapGoogleMapApi.then(function(maps) {
        var directionsDisplay = new maps.DirectionsRenderer(rendererOptions);
    
        function computeTotalDistance(result) {
          var total = 0;
          var myroutesDisplay = [];
          var myroute = result.routes[0];
          for (var i = 0; i < myroute.legs.length; i++) {
            var myrouteid = i + 1;
            total += myroute.legs[i].distance.value;
            myroutesDisplay.push({
              title: myrouteid,
              start: myroute.legs[i].start_address,
              end: myroute.legs[i].end_address,
              distance: myroute.legs[i].distance.text
            });
          }
          total = total / 1000.0;
          $scope.map.total = total + ' km';
          $scope.routesDisplay = myroutesDisplay;
          $scope.$apply();
        }
    
        $scope.calcRoute = function (routePoints) {
          var ways = [];
          for (var i = 0; i < routePoints.ways.length; i++) {
            ways.push({
              location:routePoints.ways[i].latlng,
              stopover:true
            });
          };
          var directionsService = new maps.DirectionsService();
          directionsDisplay.setMap($scope.map.control.getGMap());
          maps.event.addListener(directionsDisplay, 'directions_changed', function() {
            computeTotalDistance(directionsDisplay.getDirections());
          });
          var start = routePoints.start.latlng;
          var end = routePoints.end.latlng;
          var request = {
            origin: start,
            destination: end,
            waypoints: ways,
            optimizeWaypoints: true,
            travelMode: maps.TravelMode.WALKING
          };
          var routesDisplay = [];
          directionsService.route(request, function(response, status) {
            if (status == maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
              var route = response.routes[0];
              for (var i = 0; i < route.legs.length; i++) {
                var routeid = i + 1;
                routesDisplay.push({
                  title: routeid,
                  start: route.legs[i].start_address,
                  end: route.legs[i].end_address,
                  distance: route.legs[i].distance.text
                });
              }
            }
          });
          $scope.routesDisplay = routesDisplay;
          return;
        };
      });
    }]);