Skip to content

Commit 9da07be

Browse files
bjorn2404bjorn2404
committed
Version 1.4
Handlebars now required, added kilometers option, origin marker option, maximum distance option, ASP.net WebForms option, full map on start option, unlimited locations support, KML support, better JSONP support, reciprocal focus, optional LESS stylesheet, and several other updates and improvements
1 parent ef44181 commit 9da07be

24 files changed

+3467
-275
lines changed

‎autogeocode-example.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>Map Example 1</title>
4+
<title>Map Example - Auto geocoding</title>
55
<meta charset="UTF-8">
66
<link rel="stylesheet" type="text/css" href="css/map.css" />
77
</head>
@@ -34,7 +34,8 @@ <h1>Using Chipotle as an Example</h1>
3434
</div>
3535
</div>
3636

37-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
37+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
38+
<script src="js/handlebars-1.0.rc.1.min.js"></script>
3839
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
3940
<script src="js/jquery.storelocator.js"></script>
4041
<script>

‎css/map-style.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/map-style.less

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
#page-header
2+
{
3+
float: left;
4+
}
5+
6+
#store-locator-container
7+
{
8+
float: left;
9+
margin-left: 20px;
10+
width: 875px;
11+
font: normal 12px Arial, Helvetica, sans-serif;
12+
color: #333;
13+
14+
#form-container{
15+
clear: left;
16+
float: left;
17+
margin-top: 15px;
18+
width: 100%;
19+
}
20+
21+
#map-container{
22+
clear: left;
23+
float: left;
24+
margin-top: 27px;
25+
height: 530px;
26+
width: 875px;
27+
28+
a{
29+
color: #e76737;
30+
text-decoration: none;
31+
&:hover, &:active{
32+
text-decoration: underline;
33+
}
34+
}
35+
36+
.custom-marker{
37+
width: 32px;
38+
height: 37px;
39+
color: #fff;
40+
background: url(../images/custom-marker.png) no-repeat;
41+
padding: 3px;
42+
cursor: pointer;
43+
}
44+
}
45+
46+
#loc-list{
47+
float: left;
48+
width: 240px;
49+
height: 530px;
50+
overflow: auto;
51+
52+
ul{
53+
display: block;
54+
clear: left;
55+
float: left;
56+
list-style: none;
57+
margin: 0;
58+
padding: 0;
59+
60+
li{
61+
display: block;
62+
clear: left;
63+
float: left;
64+
margin: 6px 10px;
65+
cursor: pointer;
66+
width: 200px;
67+
border: 1px solid #fff; /* Adding this to prevent moving li elements when adding the list-focus class*/
68+
}
69+
}
70+
71+
.list-label{
72+
float: left;
73+
margin: 10px 0 0 6px;
74+
padding: 2px 3px;
75+
width: 17px;
76+
text-align: center;
77+
background: #451400;
78+
color: #fff;
79+
font-weight: bold;
80+
}
81+
82+
.list-details{
83+
float: left;
84+
margin-left: 6px;
85+
width: 165px;
86+
87+
.list-content{
88+
padding: 10px;
89+
}
90+
91+
.loc-dist{
92+
font-weight: bold;
93+
font-style: italic;
94+
color: #8e8e8e;
95+
}
96+
}
97+
98+
.list-focus{
99+
border: 1px solid rgba(82,168,236,0.9);
100+
-moz-box-shadow: 0 0 8px rgba(82,168,236,0.7);
101+
-webkit-box-shadow: 0 0 8px rgba(82,168,236,0.7);
102+
box-shadow: 0 0 8px rgba(82,168,236,0.7);
103+
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
104+
}
105+
}
106+
107+
.loc-name{
108+
/* Picked up by both list and infowindows */
109+
color: #AD2118;
110+
font-weight: bold;
111+
}
112+
113+
#search-form{
114+
clear: left;
115+
float: left;
116+
height: 60px;
117+
}
118+
119+
#form-input{
120+
float: left;
121+
margin-top: 3px;
122+
}
123+
124+
#form-input label{
125+
font-weight: bold;
126+
}
127+
128+
#address{
129+
margin: 0 0 0 10px;
130+
}
131+
132+
#submit-btn{
133+
float: left;
134+
cursor: pointer;
135+
margin-left: 10px;
136+
}
137+
138+
#map{
139+
float: left;
140+
width: 635px;
141+
height: 530px;
142+
}
143+
}
144+
145+
/* Modal window */
146+
147+
#overlay{
148+
position: fixed;
149+
left: 0px;
150+
top: 0px;
151+
width:100%;
152+
height:100%;
153+
z-index: 10000;
154+
background: url(../images/overlay-bg.png) repeat;
155+
156+
#modal-window{
157+
position: absolute;
158+
left: 50%;
159+
margin-left: -460px; /* width divided by 2 */
160+
margin-top: 60px;
161+
width: 920px;
162+
height: 590px;
163+
z-index: 10010;
164+
background: #fff;
165+
border-radius: 10px;
166+
box-shadow: 0 0 10px #656565;
167+
168+
#modal-content{
169+
float: left;
170+
padding: 0 22px; /* there's already a margin on the top of the map-container div */
171+
}
172+
173+
#close-icon{
174+
position: absolute;
175+
top: -6px;
176+
right: -6px;
177+
width: 18px;
178+
height: 18px;
179+
cursor: pointer;
180+
background: #2c2c2c url(../images/close-icon.png) 3px 3px no-repeat;
181+
border: 1px solid #000;
182+
border-radius: 3px;
183+
box-shadow: 0 0 3px #656565;
184+
}
185+
}
186+
}
187+
188+
189+
/* The following is for the geocode page and not the store locator */
190+
191+
#geocode-result{
192+
clear: left;
193+
float: left;
194+
margin-top: 30px;
195+
width: 100%;
196+
}

‎css/map.css

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
{
33
float: left;
44
margin-left: 20px;
5-
width: 860px;
5+
width: 875px;
66
font: normal 12px Arial, Helvetica, sans-serif;
77
color: #333;
88
}
@@ -26,7 +26,7 @@
2626
float: left;
2727
margin-top: 27px;
2828
height: 530px;
29-
width: 860px;
29+
width: 875px;
3030
}
3131

3232
#map-container a
@@ -40,10 +40,20 @@
4040
text-decoration: underline;
4141
}
4242

43+
#map-container .custom-marker
44+
{
45+
width: 32px;
46+
height: 37px;
47+
color: #fff;
48+
background: url(../images/custom-marker.png) no-repeat;
49+
padding: 3px;
50+
cursor: pointer;
51+
}
52+
4353
#loc-list
4454
{
4555
float: left;
46-
width: 225px;
56+
width: 240px;
4757
height: 530px;
4858
overflow: auto;
4959
}
@@ -61,7 +71,7 @@
6171
#loc-list .list-label
6272
{
6373
float: left;
64-
margin-left: 6px;
74+
margin: 10px 0 0 6px;
6575
padding: 2px 3px;
6676
width: 17px;
6777
text-align: center;
@@ -94,9 +104,19 @@
94104
display: block;
95105
clear: left;
96106
float: left;
97-
margin: 10px 0;
107+
margin: 6px 10px;
98108
cursor: pointer;
99-
width: 205px;
109+
width: 200px;
110+
border: 1px solid #fff; /* Adding this to prevent moving li elements when adding the list-focus class*/
111+
}
112+
113+
#loc-list .list-focus
114+
{
115+
border: 1px solid rgba(82,168,236,0.9);
116+
-moz-box-shadow: 0 0 8px rgba(82,168,236,0.7);
117+
-webkit-box-shadow: 0 0 8px rgba(82,168,236,0.7);
118+
box-shadow: 0 0 8px rgba(82,168,236,0.7);
119+
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
100120
}
101121

102122
#map-container .loc-name
@@ -172,7 +192,7 @@
172192
#modal-content
173193
{
174194
float: left;
175-
padding: 0 30px; /* there's already a margin on the top of the map-container div */
195+
padding: 0 22px; /* there's already a margin on the top of the map-container div */
176196
}
177197

178198
#close-icon

‎default-location-example.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>Map Example 4 - Default Location</title>
4+
<title>Map Example - Default Location</title>
55
<meta charset="UTF-8">
66
<link rel="stylesheet" type="text/css" href="css/map.css" />
77
</head>
@@ -34,7 +34,8 @@ <h1>Using Chipotle as an Example</h1>
3434
</div>
3535
</div>
3636

37-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
37+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
38+
<script src="js/handlebars-1.0.rc.1.min.js"></script>
3839
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
3940
<script src="js/jquery.storelocator.js"></script>
4041
<script>

‎geocode.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ <h1>Simple geocoding form</h1>
2727
<div id="geocode-result"></div>
2828
</div>
2929

30-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
30+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
3131
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
3232
<script src="js/geocode.js"></script>
3333

‎images/custom-marker.png

1.29 KB
Loading

‎index.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>Map Example 1</title>
4+
<title>Map Example</title>
55
<meta charset="UTF-8">
66
<link rel="stylesheet" type="text/css" href="css/map.css" />
77
</head>
@@ -34,7 +34,8 @@ <h1>Using Chipotle as an Example</h1>
3434
</div>
3535
</div>
3636

37-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
37+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
38+
<script src="js/handlebars-1.0.rc.1.min.js"></script>
3839
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
3940
<script src="js/jquery.storelocator.js"></script>
4041
<script>
@@ -44,4 +45,4 @@ <h1>Using Chipotle as an Example</h1>
4445
</script>
4546

4647
</body>
47-
</html>
48+
</html>

0 commit comments

Comments
 (0)