AutoCompletion script for world places using google geocode API

Source code and README available at: https://github.com/prabgupt/geocode_autocompletion_js

Purpose of this Utility: It will auto suggest world places based on user input

Instructions  as well as sample HTML to use the code are mentioned inside README mentioned above.

Making of geocode_autocomplete.js

I’m assuming here that you are already familiar with JavaScript/jQuery. You’ll need to understand following things so as to proceed further:

  1. autocomple jQuery UI: This jquery displays suggested list based on result passed to it
  2. Google Maps GeoCoding API usage: I’d recommend you to go through ‘Results‘  structure as it will help you to identify attributes you need to process based on your requirement. Once understood, rest would just be getting those attributes from result.

[gist id=c92b776656b43b44f4a9]

StepWise description of above code:

# First we bind ‘focus’ event to element so that on focus, we can attach autocomplete handler to it.

# source requires map list that will get displayed as suggestion list. We are calling geocode function of google maps here treating input value as some address. You can change the attribute as per what you expect end user to provide.

On receiving response, we are populating map which will be shown as suggested list. An entry in this suggested list is kinda map containing multiple keys/values. You can add/remove keys as per your requirement.

# minLength attr specifies minimum length of input after which it should try to find suggested list.

# select attr contains functions which gets executed once an entry is selected. In our case, once an entry is selected we process its location(lat/lng) and displays it on UI. You can add your logic that you need to execute once an entry is selected.

5 thoughts on “AutoCompletion script for world places using google geocode API

  1. This is great, thanks! Would be great to see a complete demo. I’ve seen other versions with .change event. Will this work every time a person types something or deletes something and with enter key?

  2. Thanks for suggestion.. I’ll try to put up a separate demo for this script. Meanwhile you can see it working on http://www.traveltriangle.com. You’ll see a form on this site where in for two fields(I am leaving from, to), the same script(with minor UI modification) has been used.

    Let me know if you face any issue.

  3. Hey, that’s a great script!
    Thanks so much it is exactly what I’m looking for.
    However, I found the autocomplete usually show one prediction and poor accuracy in first 2~4 characters.
    How can I have this has more predictions at beginning?

    Thank you so much for helping.

Comments