ngmap
Version:
The Simplest AngularJS Google Maps V3 Directive
66 lines (61 loc) • 2.32 kB
HTML
<html>
<head>
<title>Travel modes in directions</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="script-tags-for-development.js"></script>
<style>
html, body {width:100%; height: 100%; padding:0; margin: 0}
body {padding: 5px}
* { box-sizing: border-box; }
</style>
<script>
angular.module('ngMap').run(function($rootScope) {
$rootScope.logLatLng = function(e) {
console.log('loc', e.latLng);
}
$rootScope.wayPoints = [
{location: {lat:44.32384807250689, lng: -78.079833984375}, stopover: true},
{location: {lat:44.55916341529184, lng: -76.17919921875}, stopover: true},
];
});
</script>
</head>
<body ng-app="ngMap">
<div style="width: 68%; float:left; height: 100%">
<b>Origin </b>
<select ng-model="origin" ng-init="origin='toronto'">
<option value="toronto">Toronto</option>
<option value="ottawa">Ottawa</option>
<option value="montreal">Montreal</option>
</select>
<b>Destionation </b>
<select ng-model="destination" ng-init="destination='ottawa'">
<option value="toronto">Toronto</option>
<option value="ottawa">Ottawa</option>
<option value="montreal">Montreal</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" id="my-map" center="37.7699298, -122.4469157" style="height:90%" on-click="logLatLng()" >
<directions
draggable="true"
panel="directions-panel"
travel-mode="{{travelMode}}"
waypoints="{{wayPoints}}"
origin="{{origin}}"
destination="{{destination}}">
</directions>
</ng-map>
Directions path length:
{{map.directionsRenderers[0].directions.routes[0].overview_path.length}}
</div>
<div id="directions-panel" style="width: 28%; float:left; height: 100%; overflow: auto; padding: 0px 5px">
</div>
</body>
</html>