I’ve spent the last few days wrestling with building a custom geocoder using Google map data. I wanted something that would extend the native autocomplete functionality in the new jQuery UI library.
I’ve never written a jQuery plugin before and first I tried to learn by deconstruction. Since I just recently started programming Javascript again (after not touching it for 4 years), this was a pretty painful process. I finally had the good sense to find a simple jQuery plugin tutorial. That made things a lot easier and helped me understand how the basic template architecture works.
Most of the geocoding plugins I found either used the Google Maps API v2 or used the old deprecated jQuery autocomplete plugin. Also, I really wanted a live map in the actual autocomplete widget so that users can visually confirm that the address they’re about to select is indeed that address that they want. The closest solution I found offered Google geocoded results, but the map was not part of the drop down menu. I ended up using this as inspiration for my own version.
The plugin is completely customizable through CSS. It’ll take any string that you give it and return Google geocoded data. The map in the suggestion menu updates as you scroll over the suggestions. Check out the demo and get the source code on github.