Reply To: ACF Pro Address Field Replacement

• adevx

• June 21, 2016 at 8:06 am

Thanks to Elliot’s excellent advice I managed to get this issue resolved.
I created the address fields required like street, street_number, postcal code, city, country etc. I hide these fields with css, but you might want to show them to your clients.

I hook into the ready action and have to do a little waiting game before creating the geocoder, this is my first attempt and could be improved upon.
Listening to the google_map_change event I do a geocode request on the marker and inject the parsed values into the field (id’s). Hope this works as a starter for people trying to get more out of the google maps field.

Remember, this is a draft at best but should help to get you started.

acf.add_action('ready', function( $el ){

    setTimeout(function() {
            doStuf();
        }, 2000)

});

function doStuf() {
    acf.geocoder = new google.maps.Geocoder;
    acf.add_action('google_map_change', function( $el , $para2, $para3) {

        var latlng = {lat: $para2.marker.getPosition().lat(), lng: $para2.marker.getPosition().lng()};
        acf.geocoder.geocode({'location': latlng}, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                console.log(results);
                if (results[0]) {
                    var location = results[0];
                    if(location && location["address_components"] && location["address_components"].length) {
                        location["address_components"].forEach(function (loc_comp) {

                            if (loc_comp.types.indexOf("street_number") == 0) {
                                // number acf-acf-field_5768465c33a83
                                jQuery("#acf-field_5768465c33a83").val(loc_comp.long_name);
                            }
                            if (loc_comp.types.indexOf("route") == 0) {
                                // street
                                jQuery("#acf-field_576824d541746").val(loc_comp.long_name);
                            }
                            if (loc_comp.types.indexOf("locality") == 0) {
                                // city acf-field_576824ebf4a32
                                jQuery("#acf-field_576824ebf4a32").val(loc_comp.long_name);
                            }
                            if (loc_comp.types.indexOf("administrative_area_level_1") == 0) {
                                // province / state acf-field_576824fe14f6c (strip from ,
                                if (loc_comp.long_name.indexOf(",") != -1) {
                                    loc_comp.long_name = loc_comp.long_name.substr(loc_comp.long_name.indexOf(",") + 1);
                                }
                                jQuery("#acf-field_576824fe14f6c").val(loc_comp.long_name);
                            }
                            if (loc_comp.types.indexOf("country") == 0) {
                                // country  	acf-field_5768250c14f6d
                                // country_code_iso2 acf-field_5768469733a85
                                jQuery("#acf-field_5768250c14f6d").val(loc_comp.long_name);
                                // iso2 country_code_iso2 acf-field_5768469733a85
                                jQuery("#acf-field_5768469733a85").val(loc_comp.short_name);
                            }
                            if (loc_comp.types.indexOf("postal_code") == 0) {
                                // postal_code acf-field_5768468633a84
                                jQuery("#acf-field_5768468633a84").val(loc_comp.long_name);
                            }

                        })
                    }
                } else {
                    window.alert('No results found');
                }
            } else {
                window.alert('Geocoder failed due to: ' + status);
            }
        });
    });
}