-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
134 lines (100 loc) · 3.5 KB
/
index.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
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<head>
<title>StudySpace</title>
<div id ="description">
<h1>Welcome to StudySpace!</h1>
<h3>We want you to take advantage of all the great study spots our school has to offer.</h3>
</div>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#description
{
text-align: center;
height: 11%
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 75%;
}
#block {
background: black;
height:14%;
}
#locationTable
{
background: grey;
color: white;
width: 100%;
}
td
{
text-align: center;
vertical-align: middle;
}
/* Optional: Makes the sample page fill the window. (changed this to 90%) */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDk2LOT7eAgNLMQBZBZwG1zwgENF3Tt1ww&callback=initMap">
</script>
</head>
<body>
<div id="map"></div>
<div id = "block">
<table id = "locationTable">
<tr>
<td>
<button type="button" class="btn btn-primary" onclick="showWindow(0)">Powell Library</button>
</td>
<td>
<button type="button" class="btn btn-primary" onclick="showWindow(1)">Young Research Library</button>
</td>
<td>
<button type="button" class="btn btn-primary" onclick="showWindow(2)">Hedrick Study</button>
</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-primary" onclick="showWindow(3)">Feast</button>
</td>
<td>
<button type="button" class="btn btn-primary" onclick="showWindow(4)">B-Plate</button>
</td>
<td>
<button type="button" class="btn btn-primary" onclick="showWindow(5)">Hedrick Fireside Lounge</button>
</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-primary" onclick="showWindow(6)">Bombshelter</button>
</td>
<td>
<button type="button" class="btn btn-primary" onclick="showWindow(7)">Sproul Living Room</button>
</td>
<td>
<button type="button" class="btn btn-primary" onclick="showWindow(8)">Science and Engineering Library</button>
</td>
</tr>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDk2LOT7eAgNLMQBZBZwG1zwgENF3Tt1ww&callback=initMap" async defer></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDk2LOT7eAgNLMQBZBZwG1zwgENF3Tt1ww&libraries=places">
</body>
</html>