- 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
From:{{route.start}}
To:{{route.end}}
Distance:{{route.distance}}
<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> </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.681382, longitude: 139.766084 }, options: { maxZoom: 20, minZoom: 3 }, zoom: 15, control: {}, 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]; uiGmapGoogleMapApi.then(function(maps) { var directionsDisplay = new maps.DirectionsRenderer(); $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()); 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; }; }); }]);