Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A simple demo of using jQuery UI autocomplete in conjunction with Google Maps geocoding API
CoffeeScript
branch: master

This branch is 3 commits ahead of rjshade:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
coffee
js
styles
.gitignore
Cakefile
README.md
index.html

README.md

Geocoding and autocomplete with Google Maps and jQuery UI

Forked from https://github.com/rjshade/gmaps-autocomplete

A simple demo showing how to use the jQuery UI autocomplete widget in conjunction with Google Maps geocoding service.

See it in action here: rjshade.com/projects/gmaps-autocomplete/

Some more explanation here: rjshade.com/2012/03/27/Google-Maps-autocomplete-with-jQuery-UI

What is new in this fork ?

All Coffeescript.

More flexible, just add your autocomplete input, and define dataset if needed for more options:

# The GoogleMap
data-gmap="#my_map"

# You can add "associated fields" which will be updated after selecting a location.
# Gmap API returns following "fields": lat, lng, street_number, route, locality, administrative_area_level_1, administrative_area_level_2, country, postal_code
# Name your dataset with "data-gmap-field-%" as in the following example:
data-gmap-field-locality="#my-autocomplete-locality"

See index.html for an example. Input tags' value as well as non-input are updated (jQuery.text() is used to update the tag).

If you need to hook an event after updating an associated field,use the following code:

jQuery('#my-autocomplete-locality').bind("gmapAutocompleter:fieldUpdated", function() {
    console.log("locality updated")
});
Something went wrong with that request. Please try again.