2-Feb-2016
NOTE: This article is 3 years or older so its information may no longer be relevant. Read on at your own discretion! Comments for this article have automatically been locked, refer to the
FAQ for more details.
Here's a bit of code that I'm using on a personal project of mine. This code uses the
Google Maps Places API auto complete feature without having to display a map. This means you get a text input box where you can start typing in
Google Maps locations and fit it into your standard
HTML forms.
There is a full
places auto complete example on
Google's pages but it only shows how to do it with a map present.
With my bit of code you turn this...
Into this...
So lets look at some code.
First I load the
JavaScript for the
API. This is
documented here.
Then I add an
input text field that looks something like this...
Then I add a bit of
JavaScript that initialises the
API and adds a listener to the
input text box from above.
That's pretty much it! The
input text box will now allow you to start entering locations and will attempt to auto complete them for you.
However, that is probably not that useful, so in my case I also add filtering to make sure that only 'cities' are displayed as valid auto complete options. The
JavaScript to do that is below.
-i
A quick disclaimer...
Although I put in a great effort into researching all the topics I cover, mistakes can happen.
If you spot something out of place, please do let me know.
All content and opinions expressed on this Blog are my own and do not represent the opinions of my employer (Oracle).
Use of any information contained in this blog post/article is subject to
this disclaimer.
Igor Kromin
Other posts you may like...