forked from ucmom/UCMom-Pages
-
Notifications
You must be signed in to change notification settings - Fork 0
/
ucsdmap.html
executable file
·248 lines (192 loc) · 11.8 KB
/
ucsdmap.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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<!DOCTYPE html>
<head>
<title>UC Mom Map</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
html, body { height: 100%; }
</style>
<script type="text/javascript">
// this variable will collect the html which will eventually be placed in the 2nd side panel
var sidePanelHtml = "";
// arrays to hold copies of the markers and html used by the side panel
var rooms = [];
var htmls = [];
var infoHtmls = [];
// arrays to hold info window html with get direction forms open
var dirToHtml = [];
var dirFromHtml = [];
// global map variable
var map = null;
var rendererOptions = {
draggable: true
};
// directions service
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
// A function to create the marker and set up the event window function, called for each room
function createMarker(latlng, name, html, info) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(latlng[0], latlng[1]),
map: map
});
var i = rooms.length;
// The info window version with the "to here" form open
dirToHtml[i] = html + 'Directions: <b>To here</b> - <a href="javascript:fromhere(' + i + ')">From here</a>' +
'<br>Start address:<form action="javascript:getDirections()">' +
'<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
'<INPUT value="Get Directions" TYPE="SUBMIT"> ' +
'Walk <input type="checkbox" name="walk" id="walk" />' +
'Bike <input type="checkbox" name="bike" id="bike" />' +
'<input type="hidden" id="daddr" value="' + latlng[0] + ',' + latlng[1] +
'"/></form>';
// The info window version with the "from here" form open
dirFromHtml[i] = html + 'Directions: <a href="javascript:tohere(' + i + ')">To here</a> - <b>From here</b>' +
'<br>End address:<form action="javascript:getDirections()">' +
'<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' +
'<INPUT value="Get Directions" TYPE="SUBMIT"> ' +
'Walk <input type="checkbox" name="walk" id="walk" />' +
'Bike <input type="checkbox" name="bike" id="bike" />' +
'<input type="hidden" id="saddr" value="' + latlng[0] + ',' + latlng[1] +
'"/></form>';
// The default version of the direction info asking To Here or From Here
html = html + 'Directions: <a href="javascript:tohere('+i+')">To here<\/a> - <a href="javascript:fromhere('+i+')">From here</a>';
var contentString = html;
//binding info window to marker
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
document.getElementById("infoPanel").innerHTML = info;
});
// save the info we need to use later for the side panel
rooms.push(marker);
htmls[i] = html;
// after marker is added, add a line to the side panel html (links room name to marker location on map)
sidePanelHtml += '<option value="' + (rooms.length-1) + '">' + name + '</option>';
return marker;
}
// function to request the directions
function getDirections() {
var request = {};
if (document.getElementById("walk").checked)
{
request.travelMode = google.maps.DirectionsTravelMode.WALKING;
}
else if (document.getElementById("bike").checked)
{
request.travelMode = google.maps.DirectionsTravelMode.BICYCLING;
}
else
{
request.travelMode = google.maps.DirectionsTravelMode.DRIVING;
}
// set the start and end locations
var saddr = document.getElementById("saddr").value
var daddr = document.getElementById("daddr").value
request.origin = saddr;
request.destination = daddr;
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
else{
alert("Enter proper address or location");
}
});
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
var w = document.getElementById("menu1").options[ document.getElementById("menu1").selectedIndex ].value;
//alert(w);
if(w != -1){
google.maps.event.trigger(rooms[w], "click");
}
}
// functions that open the directions forms
function tohere(i) {
infowindow.setContent(dirToHtml[i]);
infowindow.open(map,rooms[i]);
}
function fromhere(i) {
infowindow.setContent(dirFromHtml[i]);
infowindow.open(map,rooms[i]);
}
function initialize() {
// create the map
var myOptions = {
zoom: 15,
center: new google.maps.LatLng(32.8747, -117.2362),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
room1 = [32.88018, -117.23661]; //Price Center
room1Info = "<p><b>Finding the Room:</b> Green Room (Room 2.115, across from Price Center Ballroom)</p> <p><b>Access:</b> 8 am - 11 pm every day, including weekends. Hours vary during summer and holidays. Access code required. </p> </p> <p><b>Building Contact:</b> John Payne, (858) 534-8986, jpayne@ucsd.edu </p> <div class=\"innerPicture\"><img src = \"./images/mapImages/PriceCtrGreen_2.115.jpg\"><div>" // Mingshang, look at this as an example
room2 = [32.87425, -117.24086]; //Galbraith Hall
room2Info = "<p> <b>Finding the Room:</b> #252. Enter through north side main entrance double doors. Follow signs to lactation room to the left. Proceed through the double doors marked \"EXIT ROUTE\" to small inner corridor to #252.</p> <p><b>Access:</b> M-F 7:30am-5pm </p> <p><b>Building Contact:</b> Laura Manning, (858)534-4776, lmanning@ucsd.edu</p> <p>Access: </p> <div class=\"innerPicture\"><img src = \"./images/mapImages/GalbraithHall_252.jpg\"><div>" //FILL IN (MINGSHAN)
room3 = [32.8777, -117.2371]; //Leichtag 2nd or 3rd floor
room3Info = "<p><b>Finding the Room:</b> 2nd & 3rd Floor</p> <p><b>Access:</b> Standard operating hours.</p> <p><b>Building Contact:</b> Evelyn Evans, (858)822-5126, erevans@ucsd.edu </p> <div class=\"innerPicture\"><img src = \"./images/mapImages/Leichtag_2ndFloor.jpg\"><h5>2nd Floor</h5> <div class=\"innerPicture\"><img src = \"./images/mapImages/Leichtag_3rdFloor.jpg\"><div> <h5>3rd Floor</h5>"
room4 = [32.88040, -117.23320]; //Structural and Materials Engineering
room4Info = "<p><b>Finding the Room:</b> 4th Floor Women's Restroom. Located adjacent to building's center elevator</p> <p><b>Access:</b> M-F 7am-7pm</p> <p><b>Building Contact:</b> Laurance Berman, (858)534-3528, lberman@ucsd.edu</p><div class=\"innerPicture\"><img src = \"./images/mapImages/SME_4thFloor.jpg\">"
room5 = [32.8779, -117.2345]; //Biomedical Science Building
room5Info = "<p><b>Finding the Room:</b> Next to B241 in the basement; Lactation room accessible via the women's restroom.</p> <p><b>Access:</b> Standard operating hours.</p> <p><b>Building Contact:</b> Pilar King, pking@ucsd.edu</p> <div class=\"innerPicture\"><img src = \"./images/mapImages/BSB_B241.jpg\">"
room6 = [32.8841, -117.2334]; //Computer Science and Engineering Building
room6Info = "<p><b> Finding the Room:</b> </p> <p><b>Access:</b> </p> <p><b>Building Contact:</b> </p> <div class=\"innerPicture\"><img src = \"./images/mapImages/EBU-3B_3113.jpg\"><hr />"
room7 = [32.86906, -117.25116]; //Nierenberg
room7Info = "<p> <b>Finding the Room:</b> 416C. Enter double doors left of northwest corner of building. Take elevator to 4th floor. Proceed through hallway to Room #416. Enter inner corridor to #416C.</p> <p><b>Access:</b> 7:30am-5pm \(central front doors\)</p> <p><b>Building Contact:</b> Will Rivera, (58)534-1875, wrivera@ucsd.edu</p> <div class=\"innerPicture\"><img src = \"./images/mapImages/Nierenberg_416C.jpg\">" //FILL IN (MINGSHAN)
room8 = [32.877848, -117.234633]; //Women's Center
room8Info = "<p><b>Finding the Room:</b> 2nd floor (check in at front desk)</p> <p><b>Access:</b> Academic Year Hours: 9 a.m. – 7 p.m. Monday-Thursday 9 a.m. – 3 p.m., Fridays.</p> <p><b>Building Contact:</b> Jessica Geipel, (858) 822-0074, jgeipel@ucsd.edu</p> <div class=\"innerPicture\"><img src = \"./images/mapImages/WomensCtr.jpg\">" //FILL IN (MINGSHAN)
room9 = [32.89112, -117.24263]; //Torrey Pines North
room9Info = "<p><b>Finding the Room:</b> Plaza Level</p> <p><b>Access:</b> Standard operating hours</p> <p><b>Building Contact:</b> Scott Day, (858) 822-4238, scday@ucsd.edu</p> <div class=\"innerPicture\"><img src = \"./images/mapImages/TorreyPinesNorth_130.jpg\">" //FILL IN (MINGSHAN)
room10 =[32.8809, -117.2256]; //Thornton Hospital
room10Info = "<p><b>Finding the Room:</b> 320 West wing, 3rd floor</p> <p><b>Access:</b> Always open. No key or code required.</p> <p><b>Building Contact: </b>(858) 657-6412</p> <div class=\"innerPicture\"><img src = \"./images/mapImages/ThorntonHospital.jpg\"> " //FILL IN (MINGSHAN)
createMarker(room1, "UCSD Price Center" ,"<b> Price Center Room </b> <hr />", room1Info );
createMarker(room2, "Galbraith Hall", "<b> Galbraith Hall Room </b> <hr />",room2Info );
createMarker(room3, "Leichtag Hall" ,"<b> Leichtag Hall 2nd/3rd Floor Room </b> <hr />",room3Info);
createMarker(room4, "Structural and Materials Engineering" ,"<b> Structural and Materials Engineering Room </b> <hr />",room4Info );
createMarker(room5, "Biomedical Science Building", "<b> Biomedical Science Building Room </b> <hr />",room5Info);
createMarker(room6, "Computer Science and Engineering Building" ,"<b> Computer Science and Engineering Building Room </b> <hr />",room6Info);
createMarker(room7, "Nierenberg" ,"<b> Nierenberg Room </b> <hr />",room7Info );
createMarker(room8, "Women's Center", "<b> Women's Center Room </b> <hr />",room8Info);
createMarker(room9, "Torrey Pines North" ,"<b> Torrey Pines North Room </b> <hr />",room9Info);
createMarker(room10, "Thornton Hospital" ,"<b> Thornton Hospital Room </b> <hr />",room10Info);
document.getElementById("side_bar").innerHTML = "<select name='menu1' id='menu1' onchange='javascript:myclick(1)'><option value='-1'>---Choose a Room Location---</option>" + sidePanelHtml + "</select>";
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize();">
<table border="1">
<tr>
<td valign="top" style="width: 200px;">
<center><h4>Click on a Location to Find Room on Map</h4></center>
<div id="side_bar"></div>
<hr />
<div id="infoPanel"></div>
</td>
<td valign="top">
<div id="map_canvas" style="width: 800px; height: 1000px"></div>
</td>
<td valign="top" style="width: 400px;">
<center><h4>Car/Biking/Walking Directions</h4></center>
<div id="directionsPanel"></div>
</td>
</tr>
</table>
<noscript><p><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.</p>
</noscript>
</body>
</html>