Skip to content

Commit 24b8913

Browse files
bjorn2404bjorn2404
committed
Added direction links, HTML5 geolocation API option
1 parent 5dfe910 commit 24b8913

File tree

5 files changed

+168
-45
lines changed

5 files changed

+168
-45
lines changed

‎autogeocode-example.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Map Example 1</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({autoGeocode: true});
43+
});
44+
</script>
45+
46+
</body>
47+
</html>

‎default-location-example.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,7 @@ <h1>Using Chipotle as an Example</h1>
3939
<script src="js/jquery.storelocator.js"></script>
4040
<script>
4141
$(function() {
42-
//$('#map-container').storeLocator({'jsonData': true, 'dataLocation': 'locations.json'});
43-
$('#map-container').storeLocator({'slideMap' : false, 'defaultLoc': true, 'defaultLat': '44.942707', 'defaultLng' : '-93.33729900000003' });
42+
$('#map-container').storeLocator({'slideMap' : false, 'defaultLoc': true, 'defaultLat': '44.9207462', 'defaultLng' : '-93.3935366' });
4443
});
4544
</script>
4645

‎js/jquery.storelocator.js

Lines changed: 80 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* storeLocator v1.2 - jQuery store locator plugin
2+
* storeLocator v1.3 - 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
@@ -27,7 +27,8 @@ $.fn.storeLocator = function(options) {
2727
'defaultLoc' : false,
2828
'defaultLat' : '',
2929
'defaultLng' : '',
30-
'jsonData' : false
30+
'jsonData' : false,
31+
'autoGeocode' : false
3132
}, options);
3233

3334
return this.each(function() {
@@ -48,12 +49,7 @@ $.fn.storeLocator = function(options) {
4849
$this.hide();
4950
}
5051

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

5955
//Calculate geocode distance functions - you could use Google's distance service instead
@@ -69,8 +65,8 @@ $.fn.storeLocator = function(options) {
6965
};
7066

7167
//Geocode function for the origin location
72-
geocoder = new google.maps.Geocoder();
7368
function GoogleGeocode() {
69+
geocoder = new google.maps.Geocoder();
7470
this.geocode = function(address, callbackFunction) {
7571
geocoder.geocode( { 'address': address}, function(results, status) {
7672
if (status == google.maps.GeocoderStatus.OK) {
@@ -87,6 +83,75 @@ $.fn.storeLocator = function(options) {
8783
};
8884
}
8985

86+
//Reverse geocode to get address for automatic options needed for directions link
87+
function ReverseGoogleGeocode()
88+
{
89+
geocoder = new google.maps.Geocoder();
90+
this.geocode = function(latlng, callbackFunction) {
91+
geocoder.geocode( {'latLng': latlng}, function(results, status) {
92+
if (status == google.maps.GeocoderStatus.OK) {
93+
if (results[0]) {
94+
var result = {};
95+
result.address = results[0].formatted_address;
96+
callbackFunction(result);
97+
}
98+
} else {
99+
alert("Geocode was not successful for the following reason: " + status);
100+
callbackFunction(null);
101+
}
102+
});
103+
};
104+
}
105+
106+
//If a default location is set
107+
if(settings.defaultLoc == true)
108+
{
109+
//The address needs to be determined for the directions link
110+
var r = new ReverseGoogleGeocode();
111+
var latlng = new google.maps.LatLng(settings.defaultLat, settings.defaultLng);
112+
r.geocode(latlng, function(data) {
113+
if(data != null) {
114+
var originAddress = data.address;
115+
mapping(settings.defaultLat, settings.defaultLng, originAddress);
116+
} else {
117+
//Unable to geocode
118+
alert('Unable to find address');
119+
}
120+
});
121+
}
122+
123+
//HTML5 geolocation API option
124+
if(settings.autoGeocode == true)
125+
{
126+
if (navigator.geolocation)
127+
{
128+
navigator.geolocation.getCurrentPosition(autoGeocode_query, autoGeocode_error);
129+
}
130+
}
131+
132+
//If location is detected automatically
133+
function autoGeocode_query(position)
134+
{
135+
//The address needs to be determined for the directions link
136+
var r = new ReverseGoogleGeocode();
137+
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
138+
r.geocode(latlng, function(data) {
139+
if(data != null) {
140+
var originAddress = data.address;
141+
mapping(position.coords.latitude, position.coords.longitude, originAddress);
142+
} else {
143+
//Unable to geocode
144+
alert('Unable to find address');
145+
}
146+
});
147+
}
148+
149+
function autoGeocode_error(error)
150+
{
151+
//If automatic detection doesn't work show an error
152+
alert("Automatic location detection failed. Please fill in your address or zip code.");
153+
}
154+
90155
//Used to round miles to display
91156
function roundNumber(num, dec)
92157
{
@@ -115,7 +180,7 @@ $.fn.storeLocator = function(options) {
115180
if(data != null) {
116181
olat = data.latitude;
117182
olng = data.longitude;
118-
mapping(olat, olng);
183+
mapping(olat, olng, userinput);
119184
} else {
120185
//Unable to geocode
121186
alert('ERROR! Unable to geocode address');
@@ -128,7 +193,7 @@ $.fn.storeLocator = function(options) {
128193

129194

130195
//Now all the mapping stuff
131-
function mapping(orig_lat, orig_lng){
196+
function mapping(orig_lat, orig_lng, origin){
132197
$(function(){
133198

134199
var dataType;
@@ -320,7 +385,10 @@ $.fn.storeLocator = function(options) {
320385
if(distance <= 1){ distLength = "mile"; }
321386
else{ distLength = "miles"; }
322387

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(){
388+
var fullAddress = address1 + " " + address2 + ", " + city + ", " + state + " " + zip;
389+
var distLink = "<a href=\"http://maps.google.com/maps?saddr=" + origin + "&daddr=" + fullAddress + "\" target=\"_blank\">Directions<\/a>";
390+
391+
$('<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 class=\"loc-directions\">" + distLink + "<\/div><\/div><\/div>").click(function(){
324392
map.panTo(marker.getPosition());
325393
var listLoc = "left";
326394
if(settings.bounceMarker == true)

0 commit comments

Comments
 (0)