<!DOCTYPE html>
<html ng-app="MyApp">
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="assets/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="../dist/angular-google-maps-native.min.js"></script>
<script>
angular.module('MyApp', ['GoogleMapsNative'])
.controller('MyCtrl', function ($scope) {
$scope.setPanel = function (renderer) {
renderer.setPanel(document.getElementById('routes'));
}
})
;
</script>
</head>
<body ng-controller="MyCtrl">
<div class="panel">
<div class="item">
<button ng-click="destination='Bondi Beach, NSW'">address 1</button>
</div>
<div class="item">
<button ng-click="destination='Newtown'">address 2</button>
</div>
<div class="item">
<button ng-click="destination=[-33.900056739645734,151.23178482055664]">address 3</button>
</div>
</div>
<gm-map options="{center: [40.750, -73], zoom: 9}">
<gm-directions destination="destination" options="{origin: '48 Pirrama Road, Pyrmont NSW', travelMode: google.maps.DirectionsTravelMode.DRIVING}">
<gm-renderer options="{polylineOptions:{strokeColor: '#0077c4', strokeWeight: 4, strokeOpacity: 1.0}}" gm-then="setPanel(renderer)"></gm-renderer>
</gm-directions>
</gm-map>
<div id="routes"></div>
</body>
</html>
|
Download
