I have been experimenting with Google Places Autocomplete for use in a form, but can not figure out how to have the zipcode /postcode show in the autocomplete dropdown or selected input value.
The autocomplete value returned contains the zipcode, so I can extract it and insert it into the proper form input, but it doesn't show when the web visitor is entering their data.
The goal is to have a very simple form, name, address, phone, email and have all of the address specific inputs hidden (state, city, street, zip, etc).
My concern is, even though the correct data is being submitted with the form, if the web visitors don't see their zipcode, they will be concerned that they haven't sent in the complete address.
I have discovered that once you select the correct address and then go back to type in the zipcode, the API will insert the zip into the correct place and show it. But it won't show it when you initially enter the address.
Any ideas of an available option that would cause the zip to be shown initially?
you can retrive predictions programaticly using AutocompleteService Class with the getPlacePredictions() method [1] to retrive place_id [2]. then with this place_id you can use the Places Details Service [3] to get coordinates and more details of the place. Save this answer.
How do I limit Google autocomplete results to city only? List only cities in the country var options = { types: ['(cities)'], componentRestrictions: {country: “us”} }; List all cities, states and regions in the country var options = { types: ['(regions)'], componentRestrictions: {country: “us”} };
But it won't show it when you initially enter the address
...because it's not available when you enter the address. The details for a prediction will be requested when you select an item, not when you type something. So the answer is simple: it's not possible.
What you can do: create your own autocomplete and populate it with data.
You'll first need to request the predictions via the autocompleteService and then request the details via PlacesService.getDetails()
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