ngmap
Version:
The Simplest AngularJS Google Maps V3 Directive
51 lines (48 loc) • 1.72 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>
<link href="custom-marker.css" rel="stylesheet" />
<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, NgMap) {
NgMap.getMap().then(function(map) {
$rootScope.map = map;
});
});
</script>
</head>
<body ng-app="ngMap">
<div style="width: 68%; float:left; height: 100%">
<ng-map zoom="14"
center="1135 Karamea-Kohaihai Rd, Kahurangi National Park, Tasman"
style="height:90%" >
<directions
draggable="true"
panel="directions-panel"
travel-mode="DRIVING"
origin="1135 Karamea-Kohaihai Rd, Kahurangi National Park, Tasman"
destination="Pier St, Jackson Bay, West Coast, New Zeland">
</directions>
<custom-marker id="start"
position="1135 Karamea-Kohaihai Rd, Kahurangi National Park, Tasman">
<div> Start Here </div>
</custom-marker>
<custom-marker id="end"
position="Pier St, Jackson Bay, West Coast, New Zeland">
<div> Ends Here </div>
</custom-marker>
</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>