Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Google Maps v3 search with jQuery UI Autocomplete, ready for use with Rails asset pipeline
Ruby CSS JavaScript CoffeeScript
Tree: 2356d64f91

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.

Gmaps autocomplete for Rails

Extracted from gmaps-autocomplete and improved markedly and then packaged for use with Rails as an asset gem :)

See it in action here:

Some more explanation here:

Use with Rails form helpers

= simple_form_for(@post) do |f|
    = f.input :address, :input_html =>{:id => 'gmaps-input-address'}, :placeholder => 'Start typing a place name...'

Packed and ready for the Asset pipeline :)

//= require gmaps-autocomplete


$(document).ready(function() { 

Configuration options

init() take an option hash, using the following defaults:

defaultOptions = {
  mapElem: "#gmaps-canvas", 
  zoomLevel: 2, 
  mapType: google.maps.MapTypeId.ROADMAP,
  pos: [51.751724, -1.255284],
  inputField: '#gmaps-input-address',
  errorField: '#gmaps-error',
  positionOutputter: this.defaultPositionOutputter,
  updateUI : this.defaultUpdateUI,
  updateMap : this.defaultUpdateMap

autoCompleteInit also takes an option hash, but currently only region is used.

autoCompleteInit({region: 'USA'});


See spec/index.html for an example page using this "plugin". Note that if you set mapElemto null or leave out that element on the page, the autocomplete will function without attempting to update the map :)


Some of the prime candidate functions for customization are:

  • updateUi
  • updateMap

Here the default simple updateUI implementation:

updateUi: function( address, latLng ) {


Let's enrich the autocomplete fields with a jobs count for "the area" for each address.

updateUi: function( address, latLng ) {

  var jobsCount = $.ajax(url: 'jobs/search?address=' + address + '&type=count');

  $(this.inputField).val(address + ' (' + jobsCount + ' jobs)');

Customize messages

For now, directly define your own implementation (override) the following functions directly on GmapsAutoComplete

  • geocodeErrorMsg: function()
  • invalidAddressMsg: function(value)
  • noAddressFoundMsg: function()


GmapsAutoComplete.geocodeErrorMsg = function() {
  "Geocode error!"

Formtastic example

For formtastic something like:

= semantic_form_for @search do |f|
  = f.input :address, placeholder: 'find address'

$(document).ready(function() { 
  GmapsAutoComplete.init({inputField: 'form#search #address', errorField: 'form#search #address_error'});
  GmapsAutoComplete.autoCompleteInit({region: 'DK'});


  • better Javascript encapsulation
  • translation to Coffeescript using Coffee classes :)

Please help out with suggestions and improvements etc!

Contributing to gmaps-autocomplete-rails

  • Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet.
  • Check out the issue tracker to make sure someone already hasn't requested it and/or contributed it.
  • Fork the project.
  • Start a feature/bugfix branch.
  • Commit and push until you are happy with your contribution.
  • Make sure to add tests for it. This is important so I don't break it in a future version unintentionally.
  • Please try not to mess with the Rakefile, version, or history. If you want to have your own version, or is otherwise necessary, that is fine, but please isolate to its own commit so I can cherry-pick around it.

== Copyright

Copyright (c) 2012 Kristian Mandrup. See LICENSE.txt for further details.

Something went wrong with that request. Please try again.