This repository has been archived by the owner on May 24, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 403
/
index_iframe.html
127 lines (114 loc) · 4.46 KB
/
index_iframe.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
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Searchable Map Template Demo - iframe</title>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta content='' name='description' />
<meta content='' name='author' />
<!-- Styles -->
<link rel="stylesheet" href="css/bootstrap.iframe.css"/>
<link rel="stylesheet" href="css/custom.css"/>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script type="text/javascript" src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class='container-fluid iframe'>
<div class='well'>
<form class="form-inline" role="form">
<div class="form-group">
<div class="input-group" id='search_address_group'>
<input class='form-control' id='search_address' placeholder='Enter an address/intersection' type='text' />
<span class="input-group-btn">
<a class='btn btn-default' id='find_me' href='#'>
<i class='glyphicon glyphicon-screenshot'></i>
</a>
</span>
</div>
</div>
<div class="form-group">
<label>
within
<select id='search_radius'>
<option value='400'>2 blocks</option>
<option value='805'>1/2 mile</option>
<option value='1610'>1 mile</option>
<option value='3220'>2 miles</option>
</select>
</label>
</div>
<div class="form-group">
<div class="btn-group">
<a class='btn btn-primary' id='search' href='#'>
<i class='glyphicon glyphicon-search'></i>
</a>
<a class='btn btn-default' id='reset' href='#'>
<i class='glyphicon glyphicon-repeat'></i>
</a>
</div>
</div>
</form>
</div>
<noscript>
<div class='alert alert-info'>
<h4>Your JavaScript is disabled</h4>
<p>Please enable JavaScript to view the map.</p>
</div>
</noscript>
<div id='map_canvas'></div>
<div class='alert alert-info' id='result_box' ><strong id='result_count'></strong></div>
<p class='pull-right'>
<small><a href='http://derekeder.com/searchable_map_template/'>Searchable Map Template</a> by <a href='http://derekeder.com'>Derek Eder</a>.</small>
</p>
</div>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.address.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3.37&libraries=places&key=AIzaSyAjYIJDSpRo90YUDZNtLnSCTmuMHfLMAlo"></script>
<script type="text/javascript" src="js/maps_lib.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
var myMap = new MapsLib({
fusionTableId: "1m4Ez9xyTGfY2CU6O-UgEcPzlS0rnzLU93e4Faa0",
googleApiKey: "AIzaSyAjYIJDSpRo90YUDZNtLnSCTmuMHfLMAlo",
locationColumn: "geometry",
map_center: [41.8781136, -87.66677856445312],
locationScope: "chicago"
});
var autocomplete = new google.maps.places.Autocomplete(document.getElementById('search_address'));
$(':checkbox').click(function(){
myMap.doSearch();
});
$(':radio').click(function(){
myMap.doSearch();
});
$('#search_radius').change(function(){
myMap.doSearch();
});
$('#search').click(function(){
myMap.doSearch();
});
$('#find_me').click(function(){
myMap.findMe();
return false;
});
$('#reset').click(function(){
myMap.reset();
return false;
});
$(":text").keydown(function(e){
var key = e.keyCode ? e.keyCode : e.which;
if(key === 13) {
$('#search').click();
return false;
}
});
});
//]]>
</script>
</body>
</html>