[Resolved] Extracting Address Data from Maps Field

[Author]

Posts

[JEN]

I am creating my first Toolset site which is a directory. People will need to search and filter by state and city. I've used a Toolset maps field on the listing post type and that works great. The issue is I need to allow people to search by just city and state as well as display just city and state and filter by city and state. So I really need that data in separate fields.

I've been following this post to extract the data:
https://toolset.com/forums/topic/separating-content-from-the-address-field/

I have found that the code in post #522506 works great on the back end for the postal code, it does not work on the front end though.

I have not been successful in using the code in post #911325.

I have also tried using the code from #522506 and swapping out my state field and administrative_area_level_1 but that does has not work.ed

GOALS:

1. extract City and State data to Toolset fields
2. make it work with a front end Post Form

Below is the relevant code:

This code works in admin:

( function( $ ) {
 
    $( document ).ready( function(){
 
        $("input.js-toolset-google-map").on( "geocode:result", function( event, result ){
 
            var addressComponents = result.address_components,
                postal_code = "";
 
            $.each( addressComponents, function( index, value ){
 
                if ( addressComponents[ index ].types[0] == "postal_code" ) {
                    postal_code = addressComponents[ index ].short_name;
                }
 
            } );
 
            $('input[name="wpcf[postcode]"]').val( postal_code );
        } );
 
    } );
 
})( jQuery );

My edited code does not work:

( function( $ ) {
 
    $( document ).ready( function(){
 
        $("input.js-toolset-google-map").on( "geocode:result", function( event, result ){
 
            var addressComponents = result.address_components,
                administrative_area_level_1 = "";
 
            $.each( addressComponents, function( index, value ){
 
                if ( addressComponents[ index ].types[0] == "administrative_area_level_1" ) {
                    administrative_area_level_1 = addressComponents[ index ].short_name;
                }
 
            } );
 
            $('input[name="wpcf[geo_state]"]').val( administrative_area_level_1 );
        } );
 
    } );
 
})( jQuery );

Thank you!

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for contacting us and I'd be happy to assist.

On my test website, I was able to make the custom code work for the post edit screen as well as on the front-end form.

1. I added 3 custom fields:

a) 1 address type field
b) 2 single line fields with slugs "state" and "city", respectively.

2. For the back-end edit screen, I used:

( function( $ ) {
 
    $( document ).ready( function(){
 
        $("input.js-toolset-google-map").on( "geocode:result", function( event, result ){
 
            var addressComponents = result.address_components,
                postal_code = "";
 
            $.each( addressComponents, function( index, value ){

                if ( addressComponents[ index ].types[0] == "administrative_area_level_1" ) {
                    state = addressComponents[ index ].short_name;
                }

                if ( addressComponents[ index ].types[0] == "locality" ) {
                    city = addressComponents[ index ].short_name;
                }
 
            } );
 
            $('input[name="wpcf[state]"]').val( state );
            $('input[name="wpcf[city]"]').val( city );
        } );
 
    } );
 
})( jQuery );

3. In Toolset form's "JS editor", I used slightly updated code:

( function( $ ) {
 
    $( document ).ready( function(){
 
        $("input.js-toolset-google-map").on( "geocode:result", function( event, result ){
 
            var addressComponents = result.address_components,
                postal_code = "";
 
            $.each( addressComponents, function( index, value ){

                if ( addressComponents[ index ].types[0] == "administrative_area_level_1" ) {
                    state = addressComponents[ index ].short_name;
                }

                if ( addressComponents[ index ].types[0] == "locality" ) {
                    city = addressComponents[ index ].short_name;
                }
 
            } );
 
            $('input[name="wpcf-state"]').val( state );
            $('input[name="wpcf-city"]').val( city );
        } );
 
    } );
 
})( jQuery );

Please note the difference in the selector for the target fields in the front-end form's code:
-input[name="wpcf-state"]
-input[name="wpcf-city"]

regards,
Waqar

[JEN]

Hi Waqar,

It works!

I removed the old code, added your code to the JS editor, changed my field names to match and it works perfectly now.

Thank you!

[JEN]

Issue resolved.

[JEN]

Hi again Waqar, I realize this thread is closed but figured best to ask this follow up question here first so the info stays together. Hopefully you see this.

Would it be possible to write the state data to a custom taxonomy instead of a types field? I have a Hierarchical taxonomy already created for it with slug "state" but not sure how to modify the code to write to that instead.

Reason is so a list of links can be displayed with the state only showing if there are results which seems easiest to do with a category structure.

Thank you!

New threads created by Waqar and linked to this one are listed below:

https://toolset.com/forums/topic/split-extracting-address-data-from-maps-field-and-saving-as-taxonomy-term/