gmaps-autocomplete-rails 0.1.2.1 → 0.1.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/README.md +265 -50
- data/gmaps-autocomplete-rails.gemspec +7 -32
- data/vendor/assets/javascripts/gmaps-auto-complete.js +297 -0
- metadata +20 -63
- data/.document +0 -5
- data/.rspec +0 -1
- data/CHANGELOG +0 -6
- data/Gemfile.lock +0 -109
- data/Rakefile +0 -49
- data/VERSION +0 -1
- data/spec/index.html +0 -64
- data/spec/init.js +0 -4
- data/spec/jquery-ui/images/ui-bg_flat_0_aaaaaa_40x100.png +0 -0
- data/spec/jquery-ui/images/ui-bg_glass_55_fbf9ee_1x400.png +0 -0
- data/spec/jquery-ui/images/ui-bg_glass_65_ffffff_1x400.png +0 -0
- data/spec/jquery-ui/images/ui-bg_glass_75_dadada_1x400.png +0 -0
- data/spec/jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png +0 -0
- data/spec/jquery-ui/images/ui-bg_glass_75_ffffff_1x400.png +0 -0
- data/spec/jquery-ui/images/ui-bg_highlight-soft_75_cccccc_1x100.png +0 -0
- data/spec/jquery-ui/images/ui-bg_inset-soft_95_fef1ec_1x100.png +0 -0
- data/spec/jquery-ui/images/ui-icons_222222_256x240.png +0 -0
- data/spec/jquery-ui/images/ui-icons_2e83ff_256x240.png +0 -0
- data/spec/jquery-ui/images/ui-icons_454545_256x240.png +0 -0
- data/spec/jquery-ui/images/ui-icons_888888_256x240.png +0 -0
- data/spec/jquery-ui/images/ui-icons_cd0a0a_256x240.png +0 -0
- data/spec/jquery-ui/images/ui-icons_f6cf3b_256x240.png +0 -0
- data/spec/jquery-ui/jquery-ui-1.8.16.custom.css +0 -1320
- data/spec/jquery-ui/jquery.ui.1.8.16.ie.css +0 -6
- data/spec/main.css +0 -89
- data/spec/spec_helper.rb +0 -12
- data/vendor/assets/javascripts/gmaps-autocomplete.js +0 -300
@@ -1,6 +0,0 @@
|
|
1
|
-
|
2
|
-
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-left, .ui-corner-bottom{ border-radius:0px;}
|
3
|
-
.ui-state-active,.ui-tabs-selected { border-radius:0px;}
|
4
|
-
.ui-tabs-selected { border-radius:0px;}
|
5
|
-
.ui-tabs .ui-tabs-nav li{ filter:none;}
|
6
|
-
.ui-tabs .ui-tabs-nav li a { border-radius:0px; }
|
data/spec/main.css
DELETED
@@ -1,89 +0,0 @@
|
|
1
|
-
html {
|
2
|
-
margin:0;
|
3
|
-
padding:0;
|
4
|
-
border:0;
|
5
|
-
}
|
6
|
-
|
7
|
-
body, div, span, object, iframe,
|
8
|
-
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
9
|
-
a, abbr, acronym, address, code,
|
10
|
-
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
|
11
|
-
fieldset, form, label, legend,
|
12
|
-
table, caption, tbody, tfoot, thead, tr, th, td,
|
13
|
-
article, aside, dialog, figure, footer, header,
|
14
|
-
hgroup, nav, section {
|
15
|
-
margin: 0;
|
16
|
-
padding: 0;
|
17
|
-
border: 0;
|
18
|
-
font-size: 100%;
|
19
|
-
font: inherit;
|
20
|
-
vertical-align: baseline;
|
21
|
-
}
|
22
|
-
|
23
|
-
body {
|
24
|
-
color: #333;
|
25
|
-
margin: 50px;
|
26
|
-
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:13px;
|
27
|
-
}
|
28
|
-
|
29
|
-
#gmaps-canvas {
|
30
|
-
height: 400px;
|
31
|
-
|
32
|
-
border: 1px solid #999;
|
33
|
-
-moz-box-shadow: 0px 0px 5px #ccc;
|
34
|
-
-webkit-box-shadow: 0px 0px 5px #ccc;
|
35
|
-
box-shadow: 0px 0px 5px #ccc;
|
36
|
-
}
|
37
|
-
|
38
|
-
#gmaps-error {
|
39
|
-
color: #cc0000;
|
40
|
-
}
|
41
|
-
|
42
|
-
h1 {
|
43
|
-
font-weight: bold;
|
44
|
-
padding-top: 5px;
|
45
|
-
padding-bottom: 5px;
|
46
|
-
}
|
47
|
-
|
48
|
-
p {
|
49
|
-
padding-top: 5px;
|
50
|
-
padding-bottom: 5px;
|
51
|
-
}
|
52
|
-
|
53
|
-
hr {
|
54
|
-
border: none;
|
55
|
-
padding: 5px;
|
56
|
-
border-bottom: 1px solid #efefef;
|
57
|
-
}
|
58
|
-
|
59
|
-
#container {
|
60
|
-
width: 80%;
|
61
|
-
margin-left: auto;
|
62
|
-
margin-right: auto;
|
63
|
-
margin-top: 30px;
|
64
|
-
padding: 25px;
|
65
|
-
border: 1px solid #999;
|
66
|
-
-moz-box-shadow: 0px 0px 15px #ccc;
|
67
|
-
-webkit-box-shadow: 0px 0px 15px #ccc;
|
68
|
-
box-shadow: 0px 0px 15px #ccc;
|
69
|
-
}
|
70
|
-
|
71
|
-
input {
|
72
|
-
width: 500px;
|
73
|
-
}
|
74
|
-
|
75
|
-
#results {
|
76
|
-
color: #555;
|
77
|
-
padding-top: 10px;
|
78
|
-
}
|
79
|
-
|
80
|
-
#input {
|
81
|
-
padding-top: 20px;
|
82
|
-
padding-bottom: 20px;
|
83
|
-
color: #ccc;
|
84
|
-
}
|
85
|
-
#input #gmaps-output-latitude, #input #gmaps-output-longitude {
|
86
|
-
color: green;
|
87
|
-
}
|
88
|
-
|
89
|
-
.download { float: right; }
|
data/spec/spec_helper.rb
DELETED
@@ -1,12 +0,0 @@
|
|
1
|
-
$LOAD_PATH.unshift(File.join(File.dirname(__FILE__), '..', 'lib'))
|
2
|
-
$LOAD_PATH.unshift(File.dirname(__FILE__))
|
3
|
-
require 'rspec'
|
4
|
-
require 'gmaps-autocomplete-rails'
|
5
|
-
|
6
|
-
# Requires supporting files with custom matchers and macros, etc,
|
7
|
-
# in ./support/ and its subdirectories.
|
8
|
-
Dir["#{File.dirname(__FILE__)}/support/**/*.rb"].each {|f| require f}
|
9
|
-
|
10
|
-
RSpec.configure do |config|
|
11
|
-
|
12
|
-
end
|
@@ -1,300 +0,0 @@
|
|
1
|
-
var GmapsAutoComplete = {
|
2
|
-
geocoder: null,
|
3
|
-
map: null,
|
4
|
-
marker: null,
|
5
|
-
inputField: null,
|
6
|
-
errorField: null,
|
7
|
-
positionOutputter: null,
|
8
|
-
updateUI: null,
|
9
|
-
updateMap: null,
|
10
|
-
region: null,
|
11
|
-
country: null,
|
12
|
-
debugOn: false,
|
13
|
-
|
14
|
-
// initialise the google maps objects, and add listeners
|
15
|
-
mapElem: document.getElementById("gmaps-canvas"),
|
16
|
-
zoomLevel: 2,
|
17
|
-
mapType: google.maps.MapTypeId.ROADMAP,
|
18
|
-
pos: [51.751724, -1.255284],
|
19
|
-
inputField: '#gmaps-input-address',
|
20
|
-
errorField: '#gmaps-error',
|
21
|
-
positionOutputter: this.defaultPositionOutputter,
|
22
|
-
|
23
|
-
defaultOptions: {
|
24
|
-
mapElem: "#gmaps-canvas",
|
25
|
-
zoomLevel: 2,
|
26
|
-
mapType: google.maps.MapTypeId.ROADMAP,
|
27
|
-
pos: [51.751724, -1.255284],
|
28
|
-
inputField: '#gmaps-input-address',
|
29
|
-
errorField: '#gmaps-error',
|
30
|
-
debugOn: false
|
31
|
-
},
|
32
|
-
|
33
|
-
init: function(opts){
|
34
|
-
opts = opts || {};
|
35
|
-
var callOpts = jQuery.extend(true, {}, opts);
|
36
|
-
var opts = $.extend(true, {}, this.defaultOptions, opts);
|
37
|
-
|
38
|
-
var pos = opts['pos'];
|
39
|
-
var lat = pos[0];
|
40
|
-
var lng = pos[1];
|
41
|
-
|
42
|
-
var mapType = opts['mapType'];
|
43
|
-
var mapElem = null;
|
44
|
-
|
45
|
-
if (opts['mapElem']) {
|
46
|
-
mapElem = $(opts['mapElem']).get(0);
|
47
|
-
}
|
48
|
-
|
49
|
-
var zoomLevel = opts['zoomLevel'];
|
50
|
-
|
51
|
-
this.inputField = opts['inputField'];
|
52
|
-
this.errorField = opts['#gmaps-error'];
|
53
|
-
this.debugOn = opts['debugOn'];
|
54
|
-
|
55
|
-
this.positionOutputter = opts['positionOutputter'] || this.defaultPositionOutputter;
|
56
|
-
this.updateUI = opts['updateUI'] || this.defaultUpdateUI;
|
57
|
-
this.updateMap = opts['updateMap'] || this.defaultUpdateMap;
|
58
|
-
|
59
|
-
this.debug('called with opts', callOpts);
|
60
|
-
this.debug('defaultOptions', this.defaultOptions);
|
61
|
-
this.debug('options after merge with defaults', opts);
|
62
|
-
|
63
|
-
// center of the universe
|
64
|
-
var latlng = new google.maps.LatLng(lat, lng);
|
65
|
-
this.debug('lat,lng', latlng);
|
66
|
-
|
67
|
-
var mapOptions = {
|
68
|
-
zoom: zoomLevel,
|
69
|
-
center: latlng,
|
70
|
-
mapTypeId: mapType
|
71
|
-
};
|
72
|
-
|
73
|
-
this.debug('map options', mapOptions);
|
74
|
-
|
75
|
-
// the geocoder object allows us to do latlng lookup based on address
|
76
|
-
this.geocoder = new google.maps.Geocoder();
|
77
|
-
|
78
|
-
var self = this;
|
79
|
-
|
80
|
-
if (typeof(mapElem) == 'undefined') {
|
81
|
-
this.showError("Map element " + opts['mapElem'] + " could not be resolved!");
|
82
|
-
}
|
83
|
-
|
84
|
-
self.debug('mapElem', this.mapElem);
|
85
|
-
|
86
|
-
if (!mapElem) { return }
|
87
|
-
|
88
|
-
// create our map object
|
89
|
-
this.map = new google.maps.Map(mapElem, mapOptions);
|
90
|
-
|
91
|
-
if (!this.map) { return }
|
92
|
-
|
93
|
-
// the marker shows us the position of the latest address
|
94
|
-
this.marker = new google.maps.Marker({
|
95
|
-
map: this.map,
|
96
|
-
draggable: true
|
97
|
-
});
|
98
|
-
|
99
|
-
self.addMapListeners(this.marker, this.map);
|
100
|
-
},
|
101
|
-
|
102
|
-
debug: function(label, obj) {
|
103
|
-
if (!this.debugOn) { return }
|
104
|
-
console.log(label, obj);
|
105
|
-
},
|
106
|
-
|
107
|
-
addMapListeners: function(marker, map) {
|
108
|
-
self = this;
|
109
|
-
// event triggered when marker is dragged and dropped
|
110
|
-
google.maps.event.addListener(marker, 'dragend', function() {
|
111
|
-
self.geocodeLookup( 'latLng', marker.getPosition() );
|
112
|
-
});
|
113
|
-
|
114
|
-
// event triggered when map is clicked
|
115
|
-
google.maps.event.addListener(map, 'click', function(event) {
|
116
|
-
marker.setPosition(event.latLng)
|
117
|
-
self.geocodeLookup( 'latLng', event.latLng );
|
118
|
-
});
|
119
|
-
},
|
120
|
-
|
121
|
-
// move the marker to a new position, and center the map on it
|
122
|
-
defaultUpdateMap: function( geometry ) {
|
123
|
-
var map = this.map;
|
124
|
-
var marker = this.marker;
|
125
|
-
|
126
|
-
if (map) {
|
127
|
-
map.fitBounds( geometry.viewport )
|
128
|
-
}
|
129
|
-
|
130
|
-
if (marker) {
|
131
|
-
marker.setPosition( geometry.location )
|
132
|
-
}
|
133
|
-
},
|
134
|
-
|
135
|
-
// fill in the UI elements with new position data
|
136
|
-
defaultUpdateUI: function( address, latLng ) {
|
137
|
-
$(this.inputField).autocomplete("close");
|
138
|
-
|
139
|
-
this.debug('country', this.country);
|
140
|
-
var updateAdr = address.replace(", " + this.country, '');
|
141
|
-
var updateAdr = address;
|
142
|
-
this.debug('updateAdr', updateAdr);
|
143
|
-
|
144
|
-
$(this.inputField).val(updateAdr);
|
145
|
-
|
146
|
-
this.positionOutputter(latLng);
|
147
|
-
},
|
148
|
-
|
149
|
-
defaultPositionOutputter: function(latLng) {
|
150
|
-
$('#gmaps-output-latitude').html(latLng.lat());
|
151
|
-
$('#gmaps-output-longitude').html(latLng.lng());
|
152
|
-
},
|
153
|
-
|
154
|
-
// Query the Google geocode object
|
155
|
-
//
|
156
|
-
// type: 'address' for search by address
|
157
|
-
// 'latLng' for search by latLng (reverse lookup)
|
158
|
-
//
|
159
|
-
// value: search query
|
160
|
-
//
|
161
|
-
// update: should we update the map (center map and position marker)?
|
162
|
-
geocodeLookup: function( type, value, update ) {
|
163
|
-
// default value: update = false
|
164
|
-
update = typeof update !== 'undefined' ? update : false;
|
165
|
-
|
166
|
-
request = {};
|
167
|
-
request[type] = value;
|
168
|
-
|
169
|
-
this.geocoder.geocode(request, performGeocode);
|
170
|
-
},
|
171
|
-
|
172
|
-
performGeocode: function(results, status) {
|
173
|
-
this.debug('performGeocode', status);
|
174
|
-
|
175
|
-
$(self.errorField).html('');
|
176
|
-
if (status == google.maps.GeocoderStatus.OK) {
|
177
|
-
self.geocodeSuccess(results);
|
178
|
-
} else {
|
179
|
-
self.geocodeFailure(type, value);
|
180
|
-
};
|
181
|
-
},
|
182
|
-
|
183
|
-
geocodeSuccess: function(results) {
|
184
|
-
this.debug('geocodeSuccess', results);
|
185
|
-
// Google geocoding has succeeded!
|
186
|
-
if (results[0]) {
|
187
|
-
// Always update the UI elements with new location data
|
188
|
-
this.updateUI( results[0].formatted_address,
|
189
|
-
results[0].geometry.location )
|
190
|
-
|
191
|
-
// Only update the map (position marker and center map) if requested
|
192
|
-
if( update ) { this.updateMap( results[0].geometry ) }
|
193
|
-
} else {
|
194
|
-
// Geocoder status ok but no results!?
|
195
|
-
this.showError( this.geocodeErrorMsg() );
|
196
|
-
}
|
197
|
-
},
|
198
|
-
|
199
|
-
geocodeFailure: function(type, value) {
|
200
|
-
this.debug('geocodeFailure', type);
|
201
|
-
// Google Geocoding has failed. Two common reasons:
|
202
|
-
// * Address not recognised (e.g. search for 'zxxzcxczxcx')
|
203
|
-
// * Location doesn't map to address (e.g. click in middle of Atlantic)
|
204
|
-
if( type == 'address' ) {
|
205
|
-
// User has typed in an address which we can't geocode to a location
|
206
|
-
this.showError( this.invalidAddressMsg(value) );
|
207
|
-
} else {
|
208
|
-
// User has clicked or dragged marker to somewhere that Google can't do a reverse lookup for
|
209
|
-
// In this case we display a warning, clear the address box, but fill in LatLng
|
210
|
-
this.showError( this.noAddressFoundMsg() );
|
211
|
-
this.updateUI('', value)
|
212
|
-
}
|
213
|
-
},
|
214
|
-
|
215
|
-
geocodeErrorMsg: function() {
|
216
|
-
"Sorry, something went wrong. Try again!"
|
217
|
-
},
|
218
|
-
|
219
|
-
invalidAddressMsg: function(value) {
|
220
|
-
"Sorry! We couldn't find " + value + ". Try a different search term, or click the map."
|
221
|
-
},
|
222
|
-
|
223
|
-
noAddressFoundMsg: function() {
|
224
|
-
"Woah... that's pretty remote! You're going to have to manually enter a place name."
|
225
|
-
},
|
226
|
-
|
227
|
-
showError: function(msg) {
|
228
|
-
$(this.errorField).html(msg);
|
229
|
-
$(this.errorField).show();
|
230
|
-
|
231
|
-
setTimeout(function(){
|
232
|
-
$(this.errorField).hide();
|
233
|
-
}, 1000);
|
234
|
-
},
|
235
|
-
|
236
|
-
// initialise the jqueryUI autocomplete element
|
237
|
-
autoCompleteInit: function (opts) {
|
238
|
-
opts = opts || {};
|
239
|
-
this.region = opts['region'] || 'DK';
|
240
|
-
this.country = opts['country'] || 'Denmark';
|
241
|
-
this.debug('region', this.region)
|
242
|
-
|
243
|
-
var self = this;
|
244
|
-
|
245
|
-
$(this.inputField).autocomplete({
|
246
|
-
// event triggered when drop-down option selected
|
247
|
-
select: function(event,ui){
|
248
|
-
self.updateUI( ui.item.value, ui.item.geocode.geometry.location )
|
249
|
-
self.updateMap( ui.item.geocode.geometry )
|
250
|
-
},
|
251
|
-
|
252
|
-
// source is the list of input options shown in the autocomplete dropdown.
|
253
|
-
// see documentation: http://jqueryui.com/demos/autocomplete/
|
254
|
-
source: function(request,response) {
|
255
|
-
// https://developers.google.com/maps/documentation/geocoding/#RegionCodes
|
256
|
-
var region_postfix = ''
|
257
|
-
var region = self.region;
|
258
|
-
|
259
|
-
if (region) {
|
260
|
-
region_postfix = ', ' + region
|
261
|
-
}
|
262
|
-
var address = request.term + region_postfix;
|
263
|
-
|
264
|
-
self.debug('geocode address', address);
|
265
|
-
|
266
|
-
var geocodeOpts = {'address': address }
|
267
|
-
|
268
|
-
// the geocode method takes an address or LatLng to search for
|
269
|
-
// and a callback function which should process the results into
|
270
|
-
// a format accepted by jqueryUI autocomplete
|
271
|
-
self.geocoder.geocode(geocodeOpts, function(results, status) {
|
272
|
-
response($.map(results, function(item) {
|
273
|
-
var uiAddress = item.formatted_address.replace(", " + self.country, '');
|
274
|
-
// var uiAddress = item.formatted_address;
|
275
|
-
return {
|
276
|
-
label: uiAddress, // appears in dropdown box
|
277
|
-
value: uiAddress, // inserted into input element when selected
|
278
|
-
geocode: item // all geocode data: used in select callback event
|
279
|
-
}
|
280
|
-
}));
|
281
|
-
})
|
282
|
-
}
|
283
|
-
});
|
284
|
-
|
285
|
-
// triggered when user presses a key in the address box
|
286
|
-
$(self.inputField).bind('keydown', this.keyDownHandler);
|
287
|
-
}, // autocomplete_init
|
288
|
-
|
289
|
-
keyDownHandler: function(event) {
|
290
|
-
if(event.keyCode == 13) {
|
291
|
-
this.geocodeLookup( 'address', $(self.inputField).val(), true );
|
292
|
-
|
293
|
-
// ensures dropdown disappears when enter is pressed
|
294
|
-
$(this.inputField).autocomplete("disable")
|
295
|
-
} else {
|
296
|
-
// re-enable if previously disabled above
|
297
|
-
$(this.inputField).autocomplete("enable")
|
298
|
-
}
|
299
|
-
}
|
300
|
-
}
|