Hello, In my site, I have a list of retailers of our company, I made a custom post type called retailers and when I add a retailer, I set a google map field with ACF. It works fine, but I’d like to sort retailers by zipcode and show a them all with in first place the zipcode. Is there a way to do that?
Hi @trouille2
In this case, you need to create a text field to store the zip code and use the geocoder to get it. Here’s an example how to do that:
// set zipcode to certain field
add_action('acf/input/admin_footer', 'my_acf_get_address_zipcode');
function my_acf_get_address_zipcode() {
?>
<script type="text/javascript">
(function($) {
// do this when the map is changed
acf.add_action('google_map_change', function( latlng, $map, $field ){
// get the address using the geocoder
acf.fields.google_map.geocoder.geocode({ 'latLng' : latlng }, function( results, status ){
// get the zip code from the returned address
var address = results[0].address_components;
var zipcode = address[address.length - 1].long_name;
// set it to a text field
$(".acf-field-1234567890abc input").val(zipcode);
});
});
})(jQuery);
</script>
<?php
}
Where “.acf-field-1234567890abc” is based on the text field key.
I hope this helps 🙂
Hi James,
Quite interesting. Thanks for your quick reply.
I’m a bit busy on different things right now, but I’ll definitely try it.
I’ll tell you if it works.
Many thanks.
Christophe
Hi again James,
Sorry for my ignorance. I guess I have to add this code to my functions.php page.
I added the text field in ACF.
Now if I go to one retailer post, when I change the google maps field, nothing happens…
Hi @trouille2
Could you please make sure that you have changed the “.acf-field-1234567890abc” target based on your text field key? Could you please share the code you used to set the text field?
Also, could you please check the console window on your browser’s developer tools for any JavaScript error on the page?
If you are sure that the target is correct and there’s no error message on the page, could you please open a new ticket and provide temporary admin credentials to your site? You can open a new ticket here: https://support.advancedcustomfields.com/new-ticket. Also, please don’t forget to explain the issue again and provide the link to this thread.
Thanks 🙂
Hmm I think we are not talking about the same thing. While I create a new retailer, I have now two fields : Google maps and a text field. Is the text field supposed to be filled automatically by itself with the zipcode when I validate an address in google maps field?
I didn’t implement the text field in my template yet so I didn’t try the end-user part.
This is the code I put in my function.php file :
// set zipcode to certain field
add_action('acf/input/admin_footer', 'my_acf_get_address_zipcode');
function my_acf_get_address_zipcode() {
?>
<script type="text/javascript">
(function($) {
// do this when the map is changed
acf.add_action('google_map_change', function( latlng, $map, $field ){
// get the address using the geocoder
acf.fields.google_map.geocoder.geocode({ 'latLng' : latlng }, function( results, status ){
// get the zip code from the returned address
var address = results[0].address_components;
var zipcode = address[address.length - 1].long_name;
// set it to a text field
$(".zipcode_to_sort input").val(zipcode);
});
});
})(jQuery);
</script>
<?php
}
This is my setting in ACF :
And this is a screenshot of 1 retailer post (admin side) :
I also have to tell you I’ve made this a few years ago when the google maps field was an paying add-on called “Advanced Custom Fields: Location Field” as I entered more than 300 retailers I never tried to adapt the code to match with the new google maps field.
Hi @trouille2
Yes, the code should fill the text field with the zip code of the address.
But it seems you are using a third-party plugin to handle the Google Map. In this case, you need to get in touch with the plugin author instead as it’s not officially created by ACF.
I hope this makes sense 🙂
Note: you will have errors if you don’t add the following
var geocoder= new google.maps.Geocoder();
Like Below
var geocoder= new google.maps.Geocoder();
// get the address using the geocoder
geocoder.geocode({ 'latLng' : latlng }, function( results, status ){
Is there a way to add the zipcode to the long address?
For example, the ACF fields shows below address:
233 South Wacker Drive, Chicago, IL, USA
I would like the zipcode included in the ACF field like below:
233 S Wacker Dr, Chicago, IL 60606
Having an option to drop the “, USA” would be great too.
