Menu
I want to present my users with a text box wherein they can type in their address. As they type their address, I want to provide the users with suggestions/predictions of what address they are trying to type. I'm also concerned about the relevance of this address (e.g. that the address is not an address halfway across the world).
Is this possible? I'm using jQuery.
215
First, enable Google Places API Web Service. Get the API key. You will have to use it in the script tag in html file. Use script file to load the autocomplete class.
The autocomplete request is available at no charge, and the subsequent Place Details call gets charged based on regular Place Details pricing. A Place Details request generates Data SKUs (Basic, Contact, and/or Atmosphere) – depending on the fields that are specified in the request.
You can use Google Places API to have an autocomplete for address. When address is selected, address_components field contains structured address data (e.g. street, city, country) and could be easily converted into separate fields.
Here is a short working demo:
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> </head> <body> <input type="text" id="address" style="width: 500px;"></input> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script> <script> var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {}); google.maps.event.addListener(autocomplete, 'place_changed', function() { var place = autocomplete.getPlace(); console.log(place.address_components); }); </script> </body> </html> Take a look at address-suggestion, and the demo. It's implemented with jQuery and Google Maps geocode API.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
