-
Notifications
You must be signed in to change notification settings - Fork 0
/
IN_State_Parks.html
110 lines (91 loc) · 3.51 KB
/
IN_State_Parks.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>The optimal road trip through all of Indiana's state parks</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>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBxiavdI9MzT_Ikjn_pfRrMmYRYnFfDUro"></script>
<script>
var routes_list = []
var markerOptions = { icon: "https://maps.gstatic.com/mapfiles/markers2/marker.png" };
var directionsDisplayOptions = {
preserveViewport: true,
markerOptions: markerOptions
};
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
var center = new google.maps.LatLng(40, -86);
var mapOptions = {
zoom: 7,
center: center
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (i = 0; i < routes_list.length; i++) {
routes_list[i].setMap(map);
}
}
function calcRoute(start, end, routes) {
var directionsDisplay = new google.maps.DirectionsRenderer(directionsDisplayOptions);
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);
}
});
routes_list.push(directionsDisplay);
}
function createRoutes(route) {
// Google's free map API is limited to 10 waypoints so need to break into batches
route.push(route[0]);
var subset = 0;
while (subset < route.length) {
var waypointSubset = route.slice(subset, subset + 10);
var startPoint = waypointSubset[0];
var midPoints = waypointSubset.slice(1, waypointSubset.length - 1);
var endPoint = waypointSubset[waypointSubset.length - 1];
calcRoute(startPoint, endPoint, midPoints);
subset += 9;
}
}
optimal_route = ['Brown County State Park, IN', 'Versailles State Park, IN', 'Clifty Falls State Park, IN', 'Charlestown State Park, IN', 'Falls of the Ohio State Park, IN', 'Spring Mill State Park, IN', "O'Bannon Woods State Park, IN", 'Lincoln State Park, IN', 'Harmonie State Park, IN', 'Shakamak State Park, IN', 'Turkey Run State Park, IN', 'Shades State Park, IN', 'Prophetstown State Park, IN', 'Tippecanoe River State Park, IN', 'Indiana Dunes State Park, IN', 'Potato Creek State Park, IN', "Chain O' Lakes State Park, IN", 'Pokagon State Park, IN', 'Ouabache State Park, IN', 'Whitewater Memorial State Park, IN', 'Summit Lake State Park, IN', 'Mounds State Park, IN', 'Fort Harrison State Park, IN', 'White River State Park, IN', "McCormick's Creek State Park, IN", 'Brown County State Park, IN']
createRoutes(optimal_route);
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>