-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (136 loc) · 6.01 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
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>Neighborhood Map</title>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA1szx1heFDJTMTvu1EvowyBQb2ib-kfJI&libraries=places"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.14/jquery.scrollTo.min.js"></script>
<script src="js/vendor/bowser.min.js"></script>
<script src="js/vendor/knockout-3.2.0.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.css"/>
<link rel="stylesheet" href="css/custom.css"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/app.js"></script>
<body>
<!-- Google Map -->
<div id="map-canvas"></div>
<!-- Modal (displays info window contents for devices with < 786px width) -->
<div class="modal fade" id="myModal">
<div class="modal-dialog infowindow-modal-dialog">
<div class="modal-content infowindow-modal-content">
<div class="modal-body infowindow-modal-body">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Alert modal -->
<div class="modal fade" id="alertModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div data-bind="isVisible: startAlertMessage"><p class="alert-message" data-bind="text: setAlertMessage"></p></div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- ./ Alert modal -->
<div id="infoWindow" data-bind="with: activeMarker" class="placeInfo">
<div class="foursquare">
<div data-bind="visible: !attachedMap.isDesktopMode()" class="close">
<button type="button"
class="btn pull-right"
data-dismiss="modal">Close
</button>
</div>
<h2 id="title" class="text-align-center">
<a data-bind="text: name, attr: { href: website }" target="_blank"></a>
</h2>
<div class="contactInfo">
<p class="address">
<strong>Location:<br></strong>
<span data-bind="text: street"></span><br>
<span data-bind="text: cityStateZip"></span><br>
<span data-bind="text: country"></span>
</p>
<p class="phone">
<strong>Phone: </strong><span data-bind="text: formattedPhone"></span>
</p>
<p class="rating">
<strong data-bind="text: rating ? 'Rating:' : 'No Ratings' "></strong>
<span data-bind="text: rating"></span>
</p>
<p class="moreInfo-link">
<a target="_blank" data-bind="attr: { href: fsWebsite }">More Info</a>
</p>
</div>
<div id="myPano" class="noselect" data-bind="css: panoCSS"></div>
</div>
</div>
<!-- List Panel -->
<div id="listPanel" data-bind="with: listPanel">
<!-- Search bar -->
<input id="searchBar" class="controls" placeholder="" type="text"
data-bind="
value: searchBar,
valueUpdate: 'keyup',
visible: isVisible,
attr: { placeholder: listInfo },
event: { keyup: searchBarInput },
css: { hidden: isVisible "
autocomplete="off" /><!-- ./Search bar -->
<!-- Search bar options -->
<div id="type-selector" class="controls" data-bind="visible: isVisible">
<input type="radio" name="type" value="search" data-bind="checked: radioOption" id="search-foursquare">
<label for="search-foursquare">Foursquareer</label>
<input type="radio" name="type" value="filter" data-bind="checked: radioOption" id="filter-list">
<label for="filter-list">Filter</label>
<div id="auto-options" class="pull-right">
<input type="checkbox" name="type" value="search" data-bind="checked: autoClose" id="auto-close">
<label for="auto-close">Auto Close</label>
<input type="checkbox" name="type" value="search" data-bind="checked: autoFocus" id="auto-hide">
<label for="auto-hide">Auto Focus</label>
</div>
</div><!-- ./Search bar options -->
<!-- List items -->
<div class="list-item-container" data-bind="visible: isVisible">
<ol type="1" id="list-items"
data-bind="foreach: { data: filteredMarkers, as: 'marker' }">
<li class="item" data-bind="event: {
mouseover: mouseover.bind($data, $parent.autoFocus(), $index()),
mouseout: mouseout,
click: click
},
css: {active: isMouseOver() || isInfoWindowOpen() },
attr: { id: id },
text: name">
</li>
</ol>
</div> <!-- ./List items -->
<!-- button panel -->
<button class="btn-panel"
data-bind="click: toggle.bind($data)">
<span data-bind="text: title "></span>
<a href="#"
data-bind="css {
'glyphicon-minimize': isVisible,
'glyphicon-maximize': !isVisible() }">
</a>
</button><!-- ./button panel -->
</div><!-- ./List panel -->
<div id="preload" style="display: none;">
<img src="https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-poi.png&scale=1" width="1" height="1" alt="Image 01" />
<img src="http://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-blue.png&scale=1" width="1" height="1" alt="Image 02" />
<img src="https://mt.google.com/vt/icon?psize=24&font=fonts/Roboto-Regular.ttf&color=ff330000&name=icons/spotlight/spotlight-waypoint-a.png&ax=44&ay=48&scale=1&text=•" width="1" height="1" alt="Image 03" />
</div>
</body>
</html>