Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
This branch is 22 commits ahead, 44 commits behind sgruhier:master.

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

jquery-addresspicker for Bootstrap

I forked this project from sgruhier[] who has built a simple address picker on top of JQuery UI Autocomplete. Since I don't want the overhead of JQUI and am stuck with Bootstrap I chose to rewrite his plugin.


Seeing is believing. Hosted on AWS S3, if it's broken and you need it, drop me a line. Otherwise: just clone the repo and open demos/index.html on your local machine...

Simple Addresspicker

The addresspicker is a plain JQuery plugin and follows mostly concepts known to Bootstrap users. I'm using Bootstrap typeahead filled by anonymous google map geocoder suggestions. Try to enter an address like Berlin Kreuzberg, Manhattan Central Park or London Soho and you'll see suggests

var addresspicker = $( "#addresspicker" ).addresspicker();

Addresspicker with Map

Addresspicker with Map

You can drag and drop the marker to the correct location. The input field address is then updated again according to a reverse Geocoding result. Note that I'm using JQuery events to notify you on address and marker position changes

var addresspickerMap = $( "#addresspicker_map" ).addresspicker(
        regionBias: "de",
        map:      "#map_canvas",
        typeaheaddelay: 1000,
        mapOptions: {
            center: new google.maps.LatLng(52.5122, 13.4194)

    addresspickerMap.on("addressChanged", function(evt, address) {
       alert( +"," + address.geometry.location.lng());
       console.dir(address); //do something with the address. It's a Google Geocoder result

    //markerPosition is a LatLng that I augmented with an getAddress function for convenience
    //getAddress triggers a reverse geocode request.

    addresspickerMap.on("positionChanged", function(evt, markerPosition) {
        markerPosition.getAddress( function(address) {
            if (address) { //address is a Google Geocoder result
                $( "#addresspicker_map").val(address.formatted_address);

Features to notice

The Bootstrap 2.2 Typeahead plugin doesn't know anything about timeouts, delays or complex return objects. I've modified the Bootstrap Typeahead code therefore. ( pull request is pending ). It passes all the tests currently. I copied its code and a minified version of it in this repo's lib folder, too. On the demo page my fork of Typeahead is already included, it contains two new features:

  • Complex objects The results of the Google Geocoding request are stored when an item is selected (obvious for JQUI users, not so in Bootstrap)
  • Delayed remote source requests Usually Bootstrap Typeahead queries a remote source on keydown. I added a delay proxy so we're not overloading the Google Geocoder with Autocompletion requests. You can adjust the addresspicker request delay by modifying the typeaheaddelay parameter.

Usage / Download

Make sure, you have included the Google Maps Javascript API: <script src=""></script> The only dependency is Bootstrap.css and the modified Bootstrap Typeahead JQuery plugin (lib) You can get the addresspicker js plugin from github: Original / Minified Your usual Bootstrap won't work here since I overrode Typeahead. I think it's safe to patch it with the Typeahead file in the lib folder (untested, nothing else changed).


What I actually wanted to create is a popover like the incredible Bootstrap Datepicker. The state I've reached is sufficient for me but if you want, go ahead and fork me.

Closed (FAQ)

Q: When the Addresspicker is loaded inside an invisible container the map view is broken / displays strangely after the container is shown.

A: After unhiding a Google map container you have to trigger a resize event to force the map to redraw (see: ) In our case it's sufficient to call the reloadPosition function on the plugin:



Demos from the JQuery UI Plugin (go to upstream base on Github)


JQuery UI widget : address autocomplete field by google maps V3 geocoding service






No releases published


No packages published


  • JavaScript 99.4%
  • Shell 0.6%