Skip to content

Commit 5dfe910

Browse files
bjorn2404bjorn2404
committed
JSON compatibility, distance length to location list, default location option, latest jQuery
1 parent e194e0d commit 5dfe910

10 files changed

+245
-73
lines changed

‎css/map.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,13 @@
8282
padding: 10px;
8383
}
8484

85+
#loc-list .loc-dist
86+
{
87+
font-weight: bold;
88+
font-style: italic;
89+
color: #8e8e8e;
90+
}
91+
8592
#loc-list li
8693
{
8794
display: block;

‎default-location-example.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Map Example 4 - Default Location</title>
5+
<meta charset="UTF-8">
6+
<link rel="stylesheet" type="text/css" href="css/map.css" />
7+
</head>
8+
9+
<body>
10+
11+
<div id="store-locator-container">
12+
<div id="page-header">
13+
<h1>Using Chipotle as an Example</h1>
14+
<p>I used locations around Minneapolis and the southwest suburbs. So, for example, Edina, Plymouth, Eden Prarie, etc. would be good for testing the functionality.
15+
You can use just the city as the address - ex: Edina, MN.</p>
16+
</div>
17+
18+
<div id="form-container">
19+
<form id="user-location" method="post" action="#">
20+
<div id="form-input">
21+
<label for="address">Enter Address or Zip Code:</label>
22+
<input type="text" id="address" name="address" />
23+
</div>
24+
25+
<div id="submit-btn"><input type="image" id="submit" name="submit" src="images/submit.jpg" alt="Submit" /></div>
26+
</form>
27+
</div>
28+
29+
<div id="map-container">
30+
<div id="loc-list">
31+
<ul id="list"></ul>
32+
</div>
33+
<div id="map"></div>
34+
</div>
35+
</div>
36+
37+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
38+
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
39+
<script src="js/jquery.storelocator.js"></script>
40+
<script>
41+
$(function() {
42+
//$('#map-container').storeLocator({'jsonData': true, 'dataLocation': 'locations.json'});
43+
$('#map-container').storeLocator({'slideMap' : false, 'defaultLoc': true, 'defaultLat': '44.942707', 'defaultLng' : '-93.33729900000003' });
44+
});
45+
</script>
46+
47+
</body>
48+
</html>

‎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.1/jquery.min.js"></script>
30+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/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

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ <h1>Using Chipotle as an Example</h1>
3434
</div>
3535
</div>
3636

37-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
37+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
3838
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
3939
<script src="js/jquery.storelocator.js"></script>
4040
<script>

‎js/jquery.storelocator.js

Lines changed: 103 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* storeLocator v1.1.3 - jQuery store locator plugin
2+
* storeLocator v1.2 - jQuery store locator plugin
33
* (c) Copyright 2012, Bjorn Holine (http://www.bjornblog.com)
44
* Released under the MIT license
55
* Distance calculation function by Chris Pietschmann: http://pietschsoft.com/post/2008/02/01/Calculate-Distance-Between-Geocodes-in-C-and-JavaScript.aspx
@@ -12,17 +12,22 @@ $.fn.storeLocator = function(options) {
1212
'mapDiv' : 'map',
1313
'listDiv' : 'list',
1414
'formID' : 'user-location',
15+
'inputID' : 'address',
1516
'zoomLevel' : 12,
1617
'pinColor' : 'fe7569',
1718
'pinTextColor' : '000000',
1819
'storeLimit' : 26,
1920
'distanceAlert' : 60,
20-
'xmlLocation' : 'locations.xml',
21+
'dataLocation' : 'locations.xml',
2122
'listColor1' : 'ffffff',
2223
'listColor2' : 'eeeeee',
2324
'bounceMarker' : true,
2425
'slideMap' : true,
25-
'modalWindow' : false
26+
'modalWindow' : false,
27+
'defaultLoc' : false,
28+
'defaultLat' : '',
29+
'defaultLng' : '',
30+
'jsonData' : false
2631
}, options);
2732

2833
return this.each(function() {
@@ -43,6 +48,11 @@ $.fn.storeLocator = function(options) {
4348
$this.hide();
4449
}
4550

51+
if(settings.defaultLoc == true)
52+
{
53+
mapping(settings.defaultLat, settings.defaultLng);
54+
}
55+
4656
var userinput, olat, olng, marker, letter, geocoder, storenum;
4757
var locationset = new Array();
4858

@@ -77,13 +87,20 @@ $.fn.storeLocator = function(options) {
7787
};
7888
}
7989

90+
//Used to round miles to display
91+
function roundNumber(num, dec)
92+
{
93+
var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
94+
return result;
95+
}
96+
8097
//Process form input
8198
$(function() {
8299
$(document).on('submit', '#' + settings.formID, function(e){
83100
//Stop the form submission
84101
e.preventDefault();
85102
//Get the user input and use it
86-
var userinput = $('#' + settings.formID).serialize();
103+
var userinput = $('#' + settings.formID + ' #' + settings.inputID).serialize();
87104
userinput = userinput.replace("address=","");
88105
if (userinput == "")
89106
{
@@ -104,9 +121,6 @@ $.fn.storeLocator = function(options) {
104121
alert('ERROR! Unable to geocode address');
105122
}
106123
});
107-
108-
//Replace spaces in user input
109-
userinput = userinput.replace(" ","+");
110124
}
111125

112126
});
@@ -116,39 +130,79 @@ $.fn.storeLocator = function(options) {
116130
//Now all the mapping stuff
117131
function mapping(orig_lat, orig_lng){
118132
$(function(){
119-
//Parse xml with jQuery
133+
134+
var dataType;
135+
136+
//JSON or XML?
137+
if(settings.jsonData == true){ dataType = "json"; }
138+
else{ dataType = "xml"; }
139+
120140
$.ajax({
121141
type: "GET",
122-
url: settings.xmlLocation,
123-
dataType: "xml",
124-
success: function(xml) {
125-
126-
//After the store locations file has been read successfully
127-
var i = 0;
128-
129-
$(xml).find('marker').each(function(){
130-
//Take the lat lng from the user, geocoded above
131-
var name = $(this).attr('name');
132-
var lat = $(this).attr('lat');
133-
var lng = $(this).attr('lng');
134-
var address = $(this).attr('address');
135-
var address2 = $(this).attr('address2');
136-
var city = $(this).attr('city');
137-
var state = $(this).attr('state');
138-
var postal = $(this).attr('postal');
139-
var phone = $(this).attr('phone');
140-
var web = $(this).attr('web');
141-
web = web.replace("http://","");
142-
var hours1 = $(this).attr('hours1');
143-
var hours2 = $(this).attr('hours2');
144-
var hours3 = $(this).attr('hours3');
145-
var distance = GeoCodeCalc.CalcDistance(orig_lat,orig_lng,lat,lng, GeoCodeCalc.EarthRadiusInMiles);
146-
147-
//Create the array
148-
locationset[i] = new Array (distance, name, lat, lng, address, address2, city, state, postal, phone, web, hours1, hours2, hours3);
149-
150-
i++;
151-
});
142+
url: settings.dataLocation,
143+
dataType: dataType,
144+
success: function(data) {
145+
146+
//After the store locations file has been read successfully
147+
var i = 0;
148+
149+
//Depending on your data strucutre and what you want to include in the maps, you may need to change the following variables or comment them out
150+
if(settings.jsonData == true)
151+
{
152+
//Process JSON
153+
$.each(data, function() {
154+
155+
var name = this.locname;
156+
var lat = this.lat;
157+
var lng = this.lng;
158+
var address = this.address;
159+
var address2 = this.address2;
160+
var city = this.city;
161+
var state = this.state;
162+
var postal = this.postal;
163+
var phone = this.phone;
164+
var web = this.web;
165+
web = web.replace("http://","");
166+
var hours1 = this.hours1;
167+
var hours2 = this.hours2;
168+
var hours3 = this.hours3;
169+
170+
var distance = GeoCodeCalc.CalcDistance(orig_lat,orig_lng,lat,lng, GeoCodeCalc.EarthRadiusInMiles);
171+
172+
//Create the array
173+
locationset[i] = new Array (distance, name, lat, lng, address, address2, city, state, postal, phone, web, hours1, hours2, hours3);
174+
175+
i++;
176+
});
177+
}
178+
else
179+
{
180+
//Process XML
181+
$(data).find('marker').each(function(){
182+
//Take the lat lng from the user, geocoded above
183+
var name = $(this).attr('name');
184+
var lat = $(this).attr('lat');
185+
var lng = $(this).attr('lng');
186+
var address = $(this).attr('address');
187+
var address2 = $(this).attr('address2');
188+
var city = $(this).attr('city');
189+
var state = $(this).attr('state');
190+
var postal = $(this).attr('postal');
191+
var phone = $(this).attr('phone');
192+
var web = $(this).attr('web');
193+
web = web.replace("http://","");
194+
var hours1 = $(this).attr('hours1');
195+
var hours2 = $(this).attr('hours2');
196+
var hours3 = $(this).attr('hours3');
197+
198+
var distance = GeoCodeCalc.CalcDistance(orig_lat,orig_lng,lat,lng, GeoCodeCalc.EarthRadiusInMiles);
199+
200+
//Create the array
201+
locationset[i] = new Array (distance, name, lat, lng, address, address2, city, state, postal, phone, web, hours1, hours2, hours3);
202+
203+
i++;
204+
});
205+
}
152206

153207
//Sort the multi-dimensional array numerically
154208
locationset.sort(function(a, b) {
@@ -166,11 +220,12 @@ $.fn.storeLocator = function(options) {
166220
//Create the map with jQuery
167221
$(function(){
168222

169-
var storeName, storeAddress1, storeAddress2, storeCity, storeState, storeZip, storePhone, storeWeb, storeHours1, storeHours2, storeHours3;
223+
var storeDistance, storeName, storeAddress1, storeAddress2, storeCity, storeState, storeZip, storePhone, storeWeb, storeHours1, storeHours2, storeHours3;
170224

171225
//Instead of repeating the same thing twice below
172226
function create_store_variables(loopcount)
173227
{
228+
storeDistance = locationset[loopcount][0];
174229
storeName = locationset[loopcount][1];
175230
storeAddress1 = locationset[loopcount][4];
176231
storeAddress2 = locationset[loopcount][5];
@@ -182,6 +237,8 @@ $.fn.storeLocator = function(options) {
182237
storeHours1 = locationset[loopcount][11];
183238
storeHours2 = locationset[loopcount][12];
184239
storeHours3 = locationset[loopcount][13];
240+
241+
storeDistance = roundNumber(storeDistance,2);
185242
}
186243

187244
//Google maps settings
@@ -253,13 +310,17 @@ $.fn.storeLocator = function(options) {
253310
var letter = String.fromCharCode("A".charCodeAt(0) + x);
254311
create_store_variables(x);
255312
//This needs to happen outside the loop or there will be a closure problem with creating the infowindows attached to the list click
256-
listClick(letter, marker, storeName, storeAddress1, storeAddress2, storeCity, storeState, storeZip, storePhone, storeWeb, storeHours1, storeHours2, storeHours3);
313+
listClick(storeDistance, letter, marker, storeName, storeAddress1, storeAddress2, storeCity, storeState, storeZip, storePhone, storeWeb, storeHours1, storeHours2, storeHours3);
257314

258315
});
259316

260-
function listClick(letter, marker, name, address1, address2, city, state, zip, phone, web, hours1, hours2, hours3)
317+
function listClick(distance, letter, marker, name, address1, address2, city, state, zip, phone, web, hours1, hours2, hours3)
261318
{
262-
$('<li />').html("<div class=\"list-label\">" + letter + "<\/div><div class=\"list-details\"><div class=\"list-content\"><div class=\"loc-name\">" + storeName + "<\/div> <div class=\"loc-addr\">" + storeAddress1 + "<\/div> <div class=\"loc-addr2\">" + storeAddress2 + "<\/div> <div class=\"loc-addr3\">" + storeCity + ", " + storeState + " " + storeZip + "<\/div> <div class=\"loc-phone\">" + storePhone + "<\/div> <div class=\"loc-web\"><a href=\"http://" + storeWeb + "\" target=\"_blank\">" + storeWeb + "</a><\/div><\/div><\/div>").click(function(){
319+
var distLength;
320+
if(distance <= 1){ distLength = "mile"; }
321+
else{ distLength = "miles"; }
322+
323+
$('<li />').html("<div class=\"list-label\">" + letter + "<\/div><div class=\"list-details\"><div class=\"list-content\"><div class=\"loc-name\">" + storeName + "<\/div> <div class=\"loc-addr\">" + storeAddress1 + "<\/div> <div class=\"loc-addr2\">" + storeAddress2 + "<\/div> <div class=\"loc-addr3\">" + storeCity + ", " + storeState + " " + storeZip + "<\/div> <div class=\"loc-phone\">" + storePhone + "<\/div> <div class=\"loc-web\"><a href=\"http://" + storeWeb + "\" target=\"_blank\">" + storeWeb + "</a><\/div><div class=\"loc-dist\">" + distance + " " + distLength + "<\/div><\/div><\/div>").click(function(){
263324
map.panTo(marker.getPosition());
264325
var listLoc = "left";
265326
if(settings.bounceMarker == true)

0 commit comments

Comments
 (0)