machine-learning/Genetic_algorithm/show_routing.template at master · adminho/machine-learning · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Randy Olson uses machine learning to find the optimal road trip across Europe.">
    <meta name="author" content="Randal S. Olson">

    <title>An optimal road trip across Europe according to machine learning</title>
    <style>
      html, body, #map-canvas {
        height: 100%%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 10px;
        border: 1px solid #999;
      }
    </style>

  </head>
  <body>
    <div id="map-canvas"></div>
	<!--<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>-->
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAK3RgqSLy1toc4lkh2JVFQ5ipuRB106vU"></script>
    <script>
		var directionsDisplay
		var markerOptions = {icon: "http://maps.gstatic.com/mapfiles/markers2/marker.png"};
		var directionsDisplayOptions = {preserveViewport: true,
										markerOptions: markerOptions};
		var directionsService = new google.maps.DirectionsService();

		var mapOptions = {
			zoom: 6,
			center: new google.maps.LatLng( 16.3416218, 101.0902424 )
		};
		var  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

		function calcRoute(start, end, routes) {
			directionsDisplay = new google.maps.DirectionsRenderer(directionsDisplayOptions);
			directionsDisplay.setMap(map)

			var waypts = [];
			for (var i = 0; i < routes.length; i++) {
				waypts.push({
					location:routes[i],
					stopover:true});
		  	}

			var request = {
				origin: start,
				destination: end,
				waypoints: waypts,
				optimizeWaypoints: false,
				travelMode: google.maps.TravelMode.DRIVING
			};

			directionsService.route(request, function(response, status) {
				if (status == google.maps.DirectionsStatus.OK)
					directionsDisplay.setDirections(response);
		  });
		}

		/* Example
		var start = ['กระบี่', 'กระบี่', 'กระบี่'];
		var end = ['ฉะเชิงเทรา', 'ศรีสะเกษ', 'กาฬสินธุ์'];
		var routes = [
						['ขอนแก่น' , 'กาฬสินธุ์' , 'ชลบุรี' , 'กรุงเทพมหานคร' , 'กาญจนบุรี' , 'กำแพงเพชร' , 'ชัยนาท' , 'จันทบุรี '],
						['กาญจนบุรี' , 'ตาก' , 'แม่ฮ่องสอน' , 'เชียงราย' , 'น่าน' , 'หนองบัวลำภู' , 'มหาสารคาม' , 'ยโสธร'],
						[ 'ชลบุรี' , 'จันทบุรี' , 'ฉะเชิงเทรา' , 'กรุงเทพมหานคร' , 'กาญจนบุรี' , 'ชัยนาท' , 'กำแพงเพชร' , 'ขอนแก่น' ]
					 ];*/

		var start = %s;
		var end  = %s;
		var routes = %s;
		console.log("start.length: ", start.length)
		console.log("end.length: ", end.length)
		console.log("routes.length: ", end.length)

		var count = 0
		old_route = []
		interval = setInterval(	function(){
			if (count%%10==0){
				var index =count/10;
				if (index < routes.length){
					calcRoute(start[index], end[index], routes[index]);
					console.log('step: ', index, ' -> routing')
				}else{
					clearInterval(interval);
					console.log('Finish')
				}

			} else if (count%%10==9 && count < 10*routes.length-9) {
				directionsDisplay.setMap(null);
				console.log('clear graphs')
			}
			count++
		},
		300
	    );

    </script>
  </body>
</html>