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.

Solution 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.

Solution 2

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

Solution 3

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.

Comments

[Dan]

Kinda cool, but its very US centric, and the wiki like pop-ups are abit overkill.

[npdoty]

Gazetteers can provide you with a fuller database of names. (I've updated my answer with some links.)

[npdoty]

Also, if you don't like Freebase Suggest's flyouts, I'd suggest {"flyout":"false"}.