Fork me on GitHub

jquery-addresspicker (as a Bootstrap JQuery Plugin)

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.

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

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

try: Berlin Kreuzberg, Manhattan Central Park or London Soho
Then try to move the marker on the map and see how the address changes. Magic.
        var addresspickerMap = $( "#addresspicker_map" ).addresspicker(
        {
            regionBias: "de",
            map:      "#map_canvas",
            typeaheaddelay: 1000,
            mapOptions: {
                zoom:16,
                center: new google.maps.LatLng(52.5122, 13.4194)
            }
        });

        addresspickerMap.on("addressChanged", function(evt, address) {

           console.dir(address); //do something with the address. It's a Google Geocoder result
           console.dir(address.geometry.location.lat() +"," + address.geometry.location.lng());
        });

        //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 modified (pull request is pending) the Bootstrap Typeahead code therefore. On this page my fork of Typeahead is included, it contains two new features:

Usage / Download

Make sure, you have included the Google Maps Javascript API: <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> The only dependency is Bootstrap.css and the modified Bootstrap Typeahead JQuery plugin

Open

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.