-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtesting.html
127 lines (108 loc) · 3.95 KB
/
testing.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
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Bathroom Buddy</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container{
height:95vh;
}
footer{
background-color: green;
}
</style>
</head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6Wl5b0AJ8xmFYPo7qeZeSGorg6yOosxc&callback=initMap"></script>
<script type="text/javascript">
var locations = [
['Bookstore', 36.998189, -122.055518, 'Bay Tree Bookstore</b>, located within <b>Quarry Plaza</b>, is located outside the bookstore, closest to the stairs that lead to Crown, across from <b>Iveta</b>. <br> <img src="bookstore.jpg" alt="bookstore" style="width:304px;">',['all-gender',"all"]],
['Classroom Unit', 36.997958, -122.056633, 'Classroom Unit</b>, located within <b>Quarry Plaza</b>, is located outside the bookstore, closest to the stairs that lead to Crown, across from <b>Iveta</b>. <br> <img src="bookstore.jpg" alt="bookstore" style="width:304px;">',['single-gender',"all"]]
];
var gooMarker = [];
function initMap() {
var myOptions = {
center: {lat: 36.9913856, lng: -122.0608718},
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("default"),
myOptions);
setMarkers(map,locations)
}
function setMarkers(map,locations){
var marker, i
for (i = 0; i < locations.length; i++){
var place = locations[i][0]
var lat = locations[i][1]
var long = locations[i][2]
var add = locations[i][3]
var category =locations[i][4]
latlngset = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
map: map, title: place , position: latlngset, category: category
});
gooMarker.push(marker);
map.setCenter(marker.getPosition())
var content = "<h3>"+place+"</h3> "+ add
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})
(marker,content,infowindow));
}
}
filterMarkers = function (category) {
for (i = 0; i < locations.length; i++) {
console.log(category);
// If is same category or category not picked
if((typeof gooMarker[i].category == 'object' && gooMarker[i].category.indexOf(category) >= 0) || category.length == 0){
gooMarker[i].setVisible(true);
}
// Categories don't match
else {
gooMarker[i].setVisible(false);
}
}
}
</script>
</head>
<body onload="initMap()">
<div class="container">
<div id="default" style="width:100%; height:100%"></div>
<p> Filter types of bathrooms here:
<select id="default" onchange="filterMarkers(this.value);">
<option value="all">all results</option>
<option value="single-gender">single-gender</option>
<option value="all-gender">all-gender</option>
</select>
</p>
<footer class="footer">
<h1>Bathroom Buddies</h1>
</footer>
</div>
<!--
<form id="default" onclick="filterMarkers(this.value);">
<input type="checkbox" value="all" onclick='filterMarkers("all");'>all</input>
<input type="checkbox" value="single-gender">single-gender</input>
<input type="checkbox" value="all-gender">all-gender</input>
</form>
-->
</body>
</html>