Geocoded Autocomplete Using jQuery UI 1.8 and Google Maps v3

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.

32 thoughts on “Geocoded Autocomplete Using jQuery UI 1.8 and Google Maps v3”

  1. Very nice. Smooth.

    Thank you for the good work.

    How much work would be involved to make this into a reverse geocoder? I.e., pick a point on the map and have the valid zoom level data offered as a choice. With a movable pointer to allow for clarification.

  2. Hi Lorenz

    Firstly, I seem to be having trouble with your demo. Both the link you have above and my downloaded copy from github resolve to empty… well, no map anyway. Just the 3 fields. (Tested from 3 different Windows machines, btw)

    I found this example after I left the first comment – http://gmaps-samples-v3.googlecode.com/svn/trunk/geocoder/v3-geocoder-tool.html

    It’s just not as polished as yours. But this is the data. So my question is would it be possible to marry yours and this… enter a place (in yours) with the nice drop down and select, with this other example where you could drop and move a marker and have the nice drop down and select. Both selects offering a finer granularity of “place”… from country down to rooftop.

    Looking forward to hearing from you. I like your work.

    Btw, your post “Amusing Ourselves to Death” was enjoyed. I think I’ve read everything Neil Postman ever wrote. Most, anyway.

  3. Hi Drew,

    I took a look at what you’re talking about. The windows issue is really interesting and I’ve only been able to fix it with a hack. I tested it in IE7 and saw the problem. Basically what’s happening is that IE deals with zindex in a really funky way. It resets all the element zindexs to zero, so that’s why you’re not seeing the map. I couldn’t get it to work right using just CSS, so I had to set the drop down elements zindex to -1 using javascript. The problem with that is that the drop down then appears below the input boxes. This is big problem because if you tried to roll this out in a real context, you’d almost surely have elements under the input box that would overlap the drop down.

    For now, I just moved the input boxes to below where the drop down appears. I’ll have to figure out how to fix this because we’re a couple weeks away from launching my new company and I use this same map plug in for a major part of our search. I’ll try to figure it out and let you know. Or, if you figure it out, that would be awesome.

    I wrote a very basic reverse geocoder for you. Now when you activate the drop down by typing in an address, you can actually click anywhere on the map and it will post the nearest address to the point that you click in the new input box I created below the lat and lng. You can see how it works here: http://fromwith.in/projects/Geocoded-Autocomplete/geocoder.html

    For better usability you might want to take the map out of the drop down and make it a regular HTML element. You can just get into the CSS and set the visibility to “visible”, and then remove corresponding javascript that makes the element “hidden”.

    Thanks for the kind words. Hope that helps.

  4. Hello,

    The demo is good but the problem I am facing is that when I search an address and click anywhere else on the page, the map disappears. Can you please help..

  5. Hi,
    Great control. Having trouble embeding it into my site since it get covered by other controls.
    Any chance to change the code so it will use jQueryUI Dialog to present the result along with the map?
    I think this will sort out the z-index problem.

  6. Hey everyone – unfortunately I’ve had to move on from this project and just don’t have time to support it anymore. Thanks for using it and reaching out. The code is pretty simple, please feel free to hack at it to make it work.

  7. I believe what you posted was actually very logical.
    However, what about this? what if you were to create a killer headline?

    I ain’t saying your content isn’t solid, however what if you added something to maybe grab a person’s attention?
    I mean Geocoded Autocomplete Using jQuery UI 1.8 and Google Maps v3 is a little vanilla.

    You ought to peek at Yahoo’s home page and note how they create article headlines to grab people to open the links.
    You might add a related video or a related pic or two to
    grab people interested about everything’ve written.
    Just my opinion, it might bring your posts a little bit more
    interesting.

  8. When I initially left a comment I appear to have clicked on the -Notify me
    when new comments are added- checkbox and from now
    on every time a comment is added I get 4 emails with the same comment.
    Is there a way you can remove me from that service?
    Thank you!

  9. Write more, thats all I have to say. Literally, it seems as though you
    relied on the video to make your point. You definitely know what youre talking about, why throw
    away your intelligence on just posting videos to your site
    when you could be giving us something enlightening to read?

  10. Admiring the commitment you put into your blog and in depth information you
    provide. It’s good to come across a blog every once in a while that
    isn’t the same unwanted rehashed information. Great read!
    I’ve bookmarked your site and I’m adding your RSS feeds to my Google
    account.

  11. obviously like your web site however you have to test the spelling on several of your posts.
    Many of them are rife with spelling issues and I to find it very bothersome to inform the truth however I’ll certainly come back again.

  12. Make sure you are eating a healthy diet and rid your home of all temptations that
    will lead you down the path of failure. In other words if you eat
    less calories than you burn you lose weight and if you eat more calories than you burn you gain weight.
    These are the same ten strategies I used to transform my
    body and the same strategies I use to stay lean all
    year.

  13. It’s hard to find your blog in google. I found it on 22
    spot, you should build quality backlinks , it will help you to increase traffic.
    I know how to help you, just type in google – k2 seo tricks

  14. Wow, wonderful weblog structure! How long have you ever been running a blog
    for? you make running a blog look easy. The whole glance of your website is magnificent, as smartly as the content!

  15. I read a lot of interesting content here.
    Probably you spend a lot of time writing, i know how to save you a lot of work, there is an online tool
    that creates unique, SEO friendly articles in minutes, just search in google – laranitas free content source

  16. An impressive share! I have just forwarded this onto a co-worker who has been conducting a little homework on this.
    And he actually ordered me breakfast because I stumbled
    upon it for him… lol. So let me reword this…. Thanks for the meal!!
    But yeah, thanx for spending the time to discuss this subject here
    on your website.

  17. Great goods from you, man. I’ve be aware your stuff previous to and you’re just extremely wonderful.

    I actually like what you’ve bought here, certainly like what you’re saying and the best way during which you
    say it.You make it entertaining and you continue too care for to keep it smart.

    I can not wait to read far more from you. Thhis iss really a great
    website.

    Here iss my weblog: darkotbit

  18. Hello there, You’ve done an excellent job. I’ll definitely digg it and personally suggest to my friends.
    I’m confident they’ll be benefited from this website.

  19. Pingback: google scraper
  20. Excellent blog right here! Also your website rather a lot up
    very fast! What host are you the usage of? Can I get your affiliate hyperlink in your
    host? I want my site loaded up as quickly as yours lol

  21. After going over a handful of the blog articles on your site, I seriously like your technique
    of writing a blog. I bookmarked it to my bookmark site list and will
    be checking back soon. Please visit my website too and tell me
    your opinion.

Leave a Reply

Your email address will not be published. Required fields are marked *