lig · May 20, 2016 14:38
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="en" ng-app="plannerApp">

 <head>
 <title>IT talk - DataArt - Voronezh - Trip Planner</title>

 <link rel="stylesheet"
 	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <link rel="stylesheet"
 	href="https://rawgit.com/kuhnza/angular-google-places-autocomplete/master/dist/autocomplete.min.css">
 <script
 	src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 <script
 	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 <script
 	src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
 <script
 	src="https://rawgit.com/kuhnza/angular-google-places-autocomplete/0.2.7/src/autocomplete.js"></script>
 <script
 	src="https://maps.googleapis.com/maps/api/js?libraries=places&language=en"></script>
 <style>
 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak,
 	.x-ng-cloak {
 	display: none !important;
 }
 </style>
 </head>

 <body ng-controller="plannerCtrl" ng-cloak>

 	<div class="container">
 		<h1>Trip Planner</h1>
 		<hr>
 		<div class="row">
 			<div class="col-md-6 col-md-offset-3">
 				<input type="text" class="form-control input-lg"
 					g-places-autocomplete ng-model="destinationData"
 					placeholder="Enter destination">
 				<button ng-click="showDestination = !showDestination"
 					class="btn btn-block btn-default btn-xs">destinationData</button>
 				<pre ng-show="showDestination">{{destination|json}}</pre>
 				<div id="map" style="height: 200px;"></div>
 			</div>
 		</div>
 		<div ng-show="destination" class="row">
 			<div class="col-md-9">
 				<h2>{{destination.formatted_address}}</h2>
 				<div ng-repeat="point in popularPoints track by $index">
 					<div class="caption">
 						<p>
 							<button ng-click="addPoint(point)" class="btn btn-info"
 								role="button">+</button>
 							{{point.name}}
 						</p>
 					</div>
 				</div>
 				<div ng-repeat="point in points track by $index">
 					<h3>{{point.name}}</h3>
 					<div class="row">
 						<div ng-repeat="photo in point.photos.slice(0, 4)"
 							class="col-xs-6 col-md-3">
 							<img
 								ng-src="{{photo.getUrl({'maxWidth': 200, 'maxHeight': 100})}}">
 						</div>
 					</div>
 				</div>
 				<hr>
 				<button ng-show="points.length > 1" ng-click="tripCalc()"
 					class="btn btn-warning btn-block">Calculate trip</button>
 				<pre ng-show="route">{{route|json}}</pre>
 			</div>
 		</div>

 		<script>
 			var app = angular.module("plannerApp", [ 'google.places' ]);
 			app.controller("plannerCtrl", function($scope) {
 				$scope.destinationData = null;
 				$scope.points = [];

 				$scope.$watch('destinationData', function(destinationData, old) {
 					if (!destinationData || typeof destinationData !== "object") {
 						$scope.destination = null;
 						return;
 					}
 					if (destinationData !== old) {
 						$scope.destination = destinationData;
 					}
 				})
 				$scope.$watch('destination', function(destination, old) {
 					if (destination && destination !== old) {
 						$scope.destinationOptions = {
 							location : destination.geometry.location,
 							radius : 50000
 						};
 						$scope.popularPoints = [];
 						$scope.map = new google.maps.Map(document.getElementById('map'), {
 							center : $scope.destinationOptions.location,
 							zoom : 5
 						});
 						var service = new google.maps.places.PlacesService($scope.map);
 						var radarOptions = {
 							location : $scope.destinationOptions.location,
 							radius : $scope.destinationOptions.radius,
 							types : [ 'airport', 'amusement_park', 'aquarium', 'art_gallery', 'casino', 'church',
 									'city_hall', 'courthouse', 'hindu_temple', 'library', 'museum', 'night_club',
 									'park', 'stadium', 'synagogue', 'university', 'zoo' ]
 						};
 						service.radarSearch(radarOptions, function(points) {
 							points.slice(0, 8).forEach(function(point) {
 								service.getDetails({
 									placeId : point.place_id
 								}, function(details) {
 									$scope.popularPoints.push(details);
 								});
 							});
 							$scope.$digest();
 						});
 					}
 				})

 				$scope.addPoint = function(point) {
 					$scope.points.push(point);
 				}

 				$scope.tripCalc = function() {
 					var directionsService = new google.maps.DirectionsService();
 					directionsService.route({
 						origin : $scope.points[0].geometry.location,
 						destination : $scope.points[$scope.points.length - 1].geometry.location,
 						waypoints : $scope.points.slice(1, $scope.points.length - 1).map(function(point) {
 							return {
 								location : point.geometry.location
 							};
 						}),
 						travelMode: google.maps.TravelMode.DRIVING
 					}, function(result) {
 						$scope.route = result;
 						$scope.$digest();
 					});
 				}
 			});
 		</script>
 </body>

 </html>
	<!doctype html>
	<html lang="en" ng-app="plannerApp">

	<head>
	<title>IT talk - DataArt - Voronezh - Trip Planner</title>

	<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<link rel="stylesheet"
	href="https://rawgit.com/kuhnza/angular-google-places-autocomplete/master/dist/autocomplete.min.css">
	<script
	src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script
	src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
	<script
	src="https://rawgit.com/kuhnza/angular-google-places-autocomplete/0.2.7/src/autocomplete.js"></script>
	<script
	src="https://maps.googleapis.com/maps/api/js?libraries=places&language=en"></script>
	<style>
	[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak,
	.x-ng-cloak {
	display: none !important;
	}
	</style>
	</head>

	<body ng-controller="plannerCtrl" ng-cloak>

	<div class="container">
	<h1>Trip Planner</h1>
	<hr>
	<div class="row">
	<div class="col-md-6 col-md-offset-3">
	<input type="text" class="form-control input-lg"
	g-places-autocomplete ng-model="destinationData"
	placeholder="Enter destination">
	<button ng-click="showDestination = !showDestination"
	class="btn btn-block btn-default btn-xs">destinationData</button>
	<pre ng-show="showDestination">{{destination\|json}}</pre>
	<div id="map" style="height: 200px;"></div>
	</div>
	</div>
	<div ng-show="destination" class="row">
	<div class="col-md-9">
	<h2>{{destination.formatted_address}}</h2>
	<div ng-repeat="point in popularPoints track by $index">
	<div class="caption">
	<p>
	<button ng-click="addPoint(point)" class="btn btn-info"
	role="button">+</button>
	{{point.name}}
	</p>
	</div>
	</div>
	<div ng-repeat="point in points track by $index">
	<h3>{{point.name}}</h3>
	<div class="row">
	<div ng-repeat="photo in point.photos.slice(0, 4)"
	class="col-xs-6 col-md-3">
	<img
	ng-src="{{photo.getUrl({'maxWidth': 200, 'maxHeight': 100})}}">
	</div>
	</div>
	</div>
	<hr>
	<button ng-show="points.length > 1" ng-click="tripCalc()"
	class="btn btn-warning btn-block">Calculate trip</button>
	<pre ng-show="route">{{route\|json}}</pre>
	</div>
	</div>

	<script>
	var app = angular.module("plannerApp", [ 'google.places' ]);
	app.controller("plannerCtrl", function($scope) {
	$scope.destinationData = null;
	$scope.points = [];

	$scope.$watch('destinationData', function(destinationData, old) {
	if (!destinationData \|\| typeof destinationData !== "object") {
	$scope.destination = null;
	return;
	}
	if (destinationData !== old) {
	$scope.destination = destinationData;
	}
	})
	$scope.$watch('destination', function(destination, old) {
	if (destination && destination !== old) {
	$scope.destinationOptions = {
	location : destination.geometry.location,
	radius : 50000
	};
	$scope.popularPoints = [];
	$scope.map = new google.maps.Map(document.getElementById('map'), {
	center : $scope.destinationOptions.location,
	zoom : 5
	});
	var service = new google.maps.places.PlacesService($scope.map);
	var radarOptions = {
	location : $scope.destinationOptions.location,
	radius : $scope.destinationOptions.radius,
	types : [ 'airport', 'amusement_park', 'aquarium', 'art_gallery', 'casino', 'church',
	'city_hall', 'courthouse', 'hindu_temple', 'library', 'museum', 'night_club',
	'park', 'stadium', 'synagogue', 'university', 'zoo' ]
	};
	service.radarSearch(radarOptions, function(points) {
	points.slice(0, 8).forEach(function(point) {
	service.getDetails({
	placeId : point.place_id
	}, function(details) {
	$scope.popularPoints.push(details);
	});
	});
	$scope.$digest();
	});
	}
	})

	$scope.addPoint = function(point) {
	$scope.points.push(point);
	}

	$scope.tripCalc = function() {
	var directionsService = new google.maps.DirectionsService();
	directionsService.route({
	origin : $scope.points[0].geometry.location,
	destination : $scope.points[$scope.points.length - 1].geometry.location,
	waypoints : $scope.points.slice(1, $scope.points.length - 1).map(function(point) {
	return {
	location : point.geometry.location
	};
	}),
	travelMode: google.maps.TravelMode.DRIVING
	}, function(result) {
	$scope.route = result;
	$scope.$digest();
	});
	}
	});
	</script>
	</body>

	</html>