Help implementing Google Place Autocomplete + ZIP code field WordPress
Dear experts,
I need help implementing Google Place Autocomplete + ZIP code field for my wordpress/classipress site.
<strong>Current situation:</strong>
- Typing the ZIP code to autocomplete the City is not implemented.
- Only typing the City name Autocomplete works. See the field <em>City or Zip/Postal code</em> on my test site: [[LINK href="http://test.immofirst.ch/?lang=en&s=&sa=search&scat=67"]]http://test.immofirst.ch/?lang=en&s=&sa=search&scat=67[[/LINK]]
This is an extract of the code I use in PHP file:
<script type="text/javascript">
var options = {
types: ['(cities)'],
componentRestrictions: {country: "ch"}
};
var input = document.getElementById('cp_city_zipcode');
var autocomplete = new google.maps.places.Autocomplete(input, options);
</script>
<strong>Expected situation:</strong>
- I need also the ZIP code to autocomplete the City (e.g. typing "2000" should suggest corresponding city "Neuchatel". I know it is possible but I do not know how to code this.
See existing examples where both ZIP and City autocomplete works as expected:
[[LINK href="http://www.geocodezip.com/v3_GoogleEx_places-autocomplete_postal_code.html"]]http://www.geocodezip.com/v3_GoogleEx_places-autocomplete_postal_code.html[[/LINK]]
Source:
[[LINK href="http://stackoverflow.com/questions/12236857/get-zipcode-with-geo-autocomplete-in-google-api-v3"]]http://stackoverflow.com/questions/12236857/get-zipcode-with-geo-autocomplete-in-google-api-v3[[/LINK]]
See also:
[[LINK href="http://codepen.io/goosey/pen/NPygdZ"]]http://codepen.io/goosey/pen/NPygdZ[[/LINK]]
Could somebody please provide the proper code I need to write in my PHP file to get ZIP autocomplete to work same as in above examples?
<em>A big thank you in advance for any help!</em>
Answers (1)
John Cotton answers:
I think your problem is
types: ['(cities)'],
since that restricts the returns to just city names and not zips/postcodes.
If you remove that and search for a zip/postcode you will see cities <em>displayed with their code</em>.
John Cotton comments:
<script type="text/javascript">
var options = {
types: [],
componentRestrictions: {country: "ch"}
};
var input = document.getElementById('cp_city_zipcode');
var autocomplete = new google.maps.places.Autocomplete(input, options);
</script>
John Cotton comments:
[[LINK href="http://codepen.io/anon/pen/qdoMwZ"]]Example here[[/LINK]]
pinic comments:
Thank you but the solution is not that simple :-)
Your suggestion DOES NOT WORK since it does not autocomplete the place when you type the ZIP code and I only need the cities in autocomplete. In order to get the ZIP code to autocomplete, I need an extra piece of code simila to the example I provided but adapted for Wordpress.
pinic comments:
[[LINK href="http://codepen.io/anon/pen/qdoMwZ"]]Example here[[/LINK]] works but I do not know how to adapt the Java Script part in my PHP file or in an external JS. Can you help adapting this example for Wordpress?
<em>Thank you for your help</em>
John Cotton comments:
I don't know what you mean by "adapt the Java Script part in my PHP file". The autocomplete is front end, so should sit in a JS file not a PHP one.
If you are trying to capture the address, the best way is to grab the reference that Google returns, and post that back for storing on the server. You can then use a cURL call to the Google APIs to retrieve the address components for that reference.
eg
https://maps.googleapis.com/maps/api/place/details/json?reference={$ref}&sensor=false&components=country:ch
If you want to adjust the visual output of the text box (eg to remove the zip) you should look at google.maps.places.AutocompleteService as that allows more control over what is displayed (you can remove parts of the result for example).