Skip to content

Commit 2fb4714

Browse files
bjorn2404bjorn2404
committed
Added Marker Clusterer library support, setting and example file
1 parent f264516 commit 2fb4714

File tree

17 files changed

+1395
-11
lines changed

17 files changed

+1395
-11
lines changed

‎Gruntfile.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,13 @@ module.exports = function (grunt) {
3636
dest: 'dist/assets/js/plugins/storeLocator/jquery.<%= pkg.name %>.js'
3737
}
3838
},
39-
uglify : {
39+
uglify: {
4040
dist: {
4141
files: {
4242
'dist/assets/js/plugins/storeLocator/jquery.<%= pkg.name %>.min.js': '<%= concat.dist.dest %>',
43-
'dist/assets/js/libs/handlebars.min.js' : 'libs/handlebars/*.js',
44-
'dist/assets/js/geocode.min.js' : 'src/js/geocode.js'
43+
'dist/assets/js/libs/handlebars.min.js' : 'libs/handlebars/*.js',
44+
'dist/assets/js/geocode.min.js' : 'src/js/geocode.js',
45+
'dist/assets/js/libs/markerclusterer.min.js' : 'libs/markerclusterer/*.js',
4546
}
4647
}
4748
},

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "jquery-storelocator-plugin",
3-
"version": "2.5.4",
3+
"version": "2.6.0",
44
"description": "This jQuery plugin takes advantage of Google Maps API version 3 to create an easy to implement store locator. No back-end programming is required, you just need to feed it KML, XML, or JSON data with all the location information.",
55
"repository": {
66
"type": "git",

‎dist/assets/img/m1.png

2.93 KB
Loading

‎dist/assets/img/m2.png

3.18 KB
Loading

‎dist/assets/img/m3.png

3.86 KB
Loading

‎dist/assets/img/m4.png

5.57 KB
Loading

‎dist/assets/img/m5.png

6.68 KB
Loading

‎dist/assets/js/libs/markerclusterer.min.js

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

‎dist/assets/js/plugins/storeLocator/jquery.storelocator.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! jQuery Google Maps Store Locator - v2.5.4 - 2016-06-05
1+
/*! jQuery Google Maps Store Locator - v2.6.0 - 2016-06-05
22
* http://www.bjornblog.com/web/jquery-store-locator-plugin
33
* Copyright (c) 2016 Bjorn Holine; Licensed MIT */
44

@@ -88,6 +88,7 @@
8888
'querystringParams' : false,
8989
'debug' : false,
9090
'sessionStorage' : false,
91+
'markerCluster' : null,
9192
'callbackNotify' : null,
9293
'callbackBeforeSend' : null,
9394
'callbackSuccess' : null,
@@ -2309,6 +2310,11 @@
23092310
});
23102311
}
23112312

2313+
// MarkerClusterer setup
2314+
if ( typeof MarkerClusterer !== 'undefined' && _this.settings.markerCluster !== null ) {
2315+
var markerCluster = new MarkerClusterer(map, markers, _this.settings.markerCluster);
2316+
}
2317+
23122318
// Handle clicks from the list
23132319
$(document).on('click.' + pluginName, '.' + _this.settings.locationList + ' li', function () {
23142320
var markerId = $(this).data('markerid');

‎dist/assets/js/plugins/storeLocator/jquery.storelocator.min.js

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

‎dist/cluster-example.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Cluster Example</title>
5+
<meta charset="UTF-8">
6+
<link rel="stylesheet" type="text/css" href="assets/css/storelocator.css" />
7+
</head>
8+
9+
<body>
10+
11+
<div class="bh-sl-container">
12+
<div id="page-header">
13+
<h1 class="bh-sl-title">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. Please see the <a target="_blank" href="https://github.com/googlemaps/js-marker-clusterer">MarkerClusterer library page</a> for documentation.</p>
16+
</div>
17+
18+
<div class="bh-sl-form-container">
19+
<form id="bh-sl-user-location" method="post" action="#">
20+
<div class="form-input">
21+
<label for="bh-sl-address">Enter Address or Zip Code:</label>
22+
<input type="text" id="bh-sl-address" name="bh-sl-address" />
23+
</div>
24+
25+
<button id="bh-sl-submit" type="submit">Submit</button>
26+
</form>
27+
</div>
28+
29+
<div id="bh-sl-map-container" class="bh-sl-map-container">
30+
<div id="bh-sl-map" class="bh-sl-map"></div>
31+
<div class="bh-sl-loc-list">
32+
<ul class="list"></ul>
33+
</div>
34+
</div>
35+
</div>
36+
37+
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
38+
<script src="assets/js/libs/handlebars.min.js"></script>
39+
<script src="assets/js/libs/markerclusterer.min.js"></script>
40+
<script src="https://maps.google.com/maps/api/js"></script>
41+
<script src="assets/js/plugins/storeLocator/jquery.storelocator.js"></script>
42+
<script>
43+
$(function() {
44+
$('#bh-sl-map-container').storeLocator({
45+
markerCluster: {
46+
imagePath: 'assets/img/m'
47+
}
48+
});
49+
});
50+
</script>
51+
52+
</body>
53+
</html>

0 commit comments

Comments
 (0)