ngmap
Version:
The Simplest AngularJS Google Maps V3 Directive
41 lines (37 loc) • 1.2 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.directions = [
{origin:"Palo Alto", destination:"Gilroy", panelName:"p1"},
{origin:"San Jose", destination:"Mountain View", panelName:"p2"}
];
});
</script>
</head>
<body ng-app="ngMap">
<div ng-repeat="dir in directions">
<div style="width: 68%; float:left; height:450px">
<ng-map style="height:100%" >
<directions
draggable="false"
travel-mode="DRIVING"
panel="{{dir.panelName}}"
origin="{{dir.origin}}"
destination="{{dir.destination}}">
</directions>
</ng-map>
</div>
<div id="{{dir.panelName}}" style="width: 32%; float:left; height:450px"></div>
</div>
</body>
</html>