An address picker for Rails with autocompletion and map picking. This library is built upon jquery-addresspicker and adds convenient features such as:
Add it to your Gemfile:
gem 'address_picker-rails'
Run the following command to install it:
bundle install
In your JavaScript manifest application.js
add:
//= require address_picker-rails
Since jquery-addresspicker
uses jQuery-UI themes, you may use jquery-ui-themes-rails instead of defining your own theme:
gem 'jquery-ui-themes'
application.css
: *= require jquery-ui/<theme_name>
You may also take a look at this simple demo application which is also deployed on Heroku.
In your migration:
class CreatePonds < ActiveRecord::Migration
def change
create_table :ponds do |t|
t.string :address
t.string :address_latitude
t.string :address_longitude
t.string :address_locality
t.string :address_country
t.timestamps
end
end
end
In your model:
class Pond < ActiveRecord::Base
attr_accessible :address, :address_latitude, :address_longitude, :address_locality, :address_country
end
In the following example the only mandatory field is the address (the first one):
<div class="field">
<%= f.label :address %><br />
<%= f.text_field :address, :class => 'address-picker-input' %>
</div>
<div class="field">
<%= f.label :address_latitude %><br />
<%= f.text_field :address_latitude, :readonly => true, :class => 'address-picker-latitude' %> </div>
<div class="field">
<%= f.label :address_longitude %><br />
<%= f.text_field :address_longitude, :readonly => true, :class => 'address-picker-longitude' %>
</div>
<div class="field">
<%= f.label :address_locality %><br />
<%= f.text_field :address_locality, :readonly => true, :class => 'address-picker-locality' %>
</div>
<div class="field">
<%= f.label :address_country %><br />
<%= f.text_field :address_country, :readonly => true, :class => 'address-picker-country' %>
</div>
<div class="field">
<%= f.label :address_map %><br />
<!-- *** Pay attention to the IDs *** -->
<div id="pond_address_map_wrapper" class="address-picker-map-wrapper">
<div class="address-picker-legend">You can drag and drop the marker to the correct location</div>
<div id="pond_address_map" class="address-picker-map"></div>
</div>
</div>
Pay attention to the IDs of the fields: all related fields must have an ID beginning with the same prefix (here that's pond_address
since we are using a form builder). The default prefix is address
.
ID | Required | Read only |
---|---|---|
[prefix] | X | |
[prefix]_latitude | X | |
[prefix]_longitude | X | |
[prefix]_locality | X | |
[prefix]_country | X | |
[prefix]_map | X |
NB: In the above example, the ID of the map field is pond_address_map
since it's not set by a builder.
The CSS classes are optional unless you're planning to use the auto-discovery feature (see below).
If you do, the address field must have the address-picker-input
class.
There are several ways to initialize the address pickers.
The simplest one is to use auto discovery which:
address-picker-input
CSS class, thenSo you can just add to your application.js
or to your view:
AddressPickerRails.Pickers.applyOnReady();
You can provide a callback which will be called after each address picker has been applied:
AddressPickerRails.Pickers.applyOnReady({
'onLoad':function (picker) {
console.debug("callback for a single pond with ID '%s'", picker.getIdPrefix());
}
});
The not deferred version:
AddressPickerRails.Pickers.apply();
The ID prefix default is address
:
new AddressPickerRails.Picker().apply();
You can use a custom ID prefix:
new AddressPickerRails.Picker({idPrefix:"pond_address"}).apply();
You can provide a callback which will be called after the address picker has been applied:
var picker = new AddressPickerRails.Picker({idPrefix:"pond_address"});
picker.apply(function (railsPicker) {
console.debug("callback for a single pond with ID '%s'", railsPicker.getIdPrefix());
});
Tested with Rails 3.2 but it should work with Rails 3.1, or anything that uses the asset pipeline.
Copyright (c) 2012 David DIDIER. See LICENSE.txt for further details.
Sébastien Gruhier@https://github.com/sgruhier/jquery-addresspicker