/
mapDirections.html
152 lines (138 loc) · 7.25 KB
/
mapDirections.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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Sho De Wae</title>
<link rel ="stylesheet" type ="text/css" href = "mapDirections.css">
</head>
<body>
<audio controls autoplay hidden>
<source src="he_knows_de_wae.mp3" type="audio/mpeg">
</audio>
<center><img src="images/de_wae_logo_v2.png" width="450" height="150"></center>
<div id="floating-panel">
<strong>Start:</strong>
<select id="start">
<!-- added name to each option -->
<option name = "pennapps" value="39.9522188,-75.1954024">PennApps</option>
<option name = "hackny" value="40.8075355,-73.9647614">HackNY</option>
<option name = "hackru" value="40.5008186,-74.4495878">HackRU</option>
<option name = "hackharvard" value="42.3770029,-71.1188488">HackHarvard</option>
<option name = "yhack" value="41.3163244,-72.9245318">YHack</option>
<option name = "uhack" value="25.7547833,-80.2563997">UHack</option>
<option name = "hoyahacks" value="38.9076089,-77.0744472">Hoya Hacks</option>
<option name = "wichacks" value="43.0861017,-77.672703">WiCHacks</option>
<option name = "hackarizona" value="32.2318851,-110.9522981">Hack Arizona</option>
<option name = "hackprinceton" value="40.3439888,-74.6536368">HackPrinceton</option>
<option name = "calhacks" value="37.8718992,-122.2607286">Cal Hacks 4.0</option>
<option name = "hackthenorth" value="43.4722854,-80.5470463">Hack the North</option>
</select>
<br>
<strong>End:</strong>
<select id="end">
<option name = "pennapps" value="39.9522188,-75.1954024">PennApps</option>
<option name = "hackny" value="40.8075355,-73.9647614">HackNY</option>
<option name = "hackru" value="40.5008186,-74.4495878">HackRU</option>
<option name = "hackharvard" value="42.3770029,-71.1188488">HackHarvard</option>
<option name = "yhack" value="41.3163244,-72.9245318">YHack</option>
<option name = "uhack" value="25.7547833,-80.2563997">UHack</option>
<option name = "hoyahacks" value="38.9076089,-77.0744472">Hoya Hacks</option>
<option name = "wichacks" value="43.0861017,-77.672703">WiCHacks</option>
<option name = "hackarizona" value="32.2318851,-110.9522981">Hack Arizona</option>
<option name = "hackprinceton" value="40.3439888,-74.6536368">HackPrinceton</option>
<option name = "calhacks" value="37.8718992,-122.2607286">Cal Hacks 4.0</option>
<option name = "hackthenorth" value="43.4722854,-80.5470463">Hack the North</option>
</select>
</div>
<div id="right-panel"></div>
<div id="map"></div>
<script>
var position = {
// set up an array of things so can access in the drop down
'pennapps' : [39.9522188,-75.1954024],
'hackny': [40.8075355,-73.9647614],
'hackru': [40.5008186,-74.4495878],
'hackharvard':[42.3770029,-71.1188488],
'yhack':[41.3163244,-72.9245318],
'uhack':[25.7547833,-80.2563997],
'hoyahacks':[38.9076089,-77.0744472],
'wichacks':[43.0861017,-77.672703],
'hackarizona':[32.2318851,-110.9522981],
'hackprinceton':[40.3439888,-74.6536368],
'calhacks':[37.8718992,-122.2607286],
'hackthenorth':[43.4722854,-80.5470463]
};
directionsDisplay.setMap(map);
directionsDisplay.setOptions( { suppressMarkers: true } );
function initMap() {
// ({suppressMarkers: true}) add this to end of directions renderer to get rid of direction markers
var directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});
var directionsService = new google.maps.DirectionsService;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 39.9522188, lng: -75.1954024}
});
var image = new google.maps.MarkerImage('images/ugandan_knuckles45.png',
new google.maps.Size(45,40),
new google.maps.Point(0,0),
new google.maps.Point(0,40)
);
var image2 = new google.maps.MarkerImage('images/de_wae_sign_v2.png',
new google.maps.Size(100,39),
new google.maps.Point(0,0),
new google.maps.Point(0,40)
);
//you set your icon for each of the direction points Origin
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(39.9522188,-75.1954024),
map: map,
icon: image
});
//you set your icon for each of the direction points Destination,
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(40.8075355,-73.9647614),
map: map,
icon: image2
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('right-panel'));
var control = document.getElementById('floating-panel');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('start').addEventListener('change', function(){
var start = document.getElementById('start').value.split(",")
marker1.setPosition(new google.maps.LatLng(start[0], start[1])) //sets the starting position at the index
});
// <img jstcache="21" src="image/ugandan_knuckles.png" class="adp-marker" jsan="7.adp-marker,8.src">
document.getElementById('end').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', function(){
var end = document.getElementById('end').value.split(",")
marker2.setPosition(new google.maps.LatLng(end[0], end[1])) //sets the destination position at the index
});
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
directionsService.route({
origin: start,
destination: end,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC2vsd9QlxipVbXFSxOwOZeoWQmB6S_0l0&callback=initMap">
</script>
</body>
</html>