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:
- autocomple jQuery UI: This jquery displays suggested list based on result passed to it
- 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.
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.
