Location search autocomplete that integrates with bing/google geocoding

Question

Any nice suggestions on auto complete location searches, that integrate with something like Google or Bings location data?

I am wanting capture the location of my users on sign up, currently I have a free text input box. I am wanting to have some sort of auto complete that guides the user to inputting more sanitised information, ideally I would like to geo-code the user too.

I'm currently using the jQuery autocomplete for the autosearch, but this requires me to provide the location data, which i dont have or want to maintain.

Answer 1

If you don't want to maintain your own database of locations (good for you!), then you might look at Freebase and their Freebase Suggest plugin for jQuery. They'll do all the auto-completion and even the suggestion UI for you and you can specify that you just want to auto-complete locations (or only US counties, or whatever).

There exist gazetteers who can provide the database of location names but won't do the auto-complete UI for you. GeoNames, for example, has a nice set of web services, which you could match up with jQuery Autocomplete.

Answer 2

We do something similar for the "billing address" field on https://bombsheets.com/ -- you need to do an AJAX call to get the autocomplete options:

 $(".address-autocomplete").autocomplete('/get_address', {
   delay: 250,
   scrollHeight: 400,
   matchSubset: false,
   cacheLength: 10,
   minChars: 3
 });

And then use a geolocation API server-side to get the actual addresses (we use Rails' excellent GeoKit).

See this question for some additional color.

Answer 3

https://github.com/lorenzsell/Geocoded-Autocomplete This jQuery plugin uses Google Geocoding Javascript API and jQuery UI Autocomplete.

Answer 4

 <script>
        function init() {
            var input = document.getElementById('locationTextField');
            var autocomplete = new google.maps.places.Autocomplete(input);

            ///Start for getting lat and lang

            google.maps.event.addListener(autocomplete, 'place_changed',
               function() {
                  var place = autocomplete.getPlace();
                  var lat = place.geometry.location.lat();
                  var lng = place.geometry.location.lng();
                  document.getElementById("lat").innerHTML = "Lat: "+lat+"<br />Lng: "+lng;
               }
            );

            ////End
        }

        google.maps.event.addDomListener(window, 'load', init);
    </script>