Skip Navigation

[Resolved] Separating content from the Address Field

This thread is resolved. Here is a description of the problem and solution.

Problem: The address field available with Toolset Maps stores the complete address as a string but is missing the post code and the individual address components (e.g. the City) are not readily available.

Solution: The Google Maps API geocoding service returns an object with the individual address components available, but Toolset maps only uses the formatted address and the latitude and longitude coordinates.

This thread describes custom Javascript that can be used to extract the post code and automatically update a post code field.

100% of people find this useful.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 6 replies, has 6 voices.

Last updated by Kevin 4 years, 4 months ago.

Assigned support staff: Nigel.

Author
Posts
#522395

I am using Toolset Maps for a searchable map of support centers. I've got it working using the Address Field and a parametric search etc. It seems odd that by using the Address field (rather than a set of single line custom fields) I am limited in the manner I can access the then stored data (city, state, etc.) Any chance you're working on some functionality to be able to pull that information out separately?

Right now the only solution I can see is to double enter the information to take advantage of the Map search features but if I want to call out the city, for instance, I must add that as an additional custom field. Or am I mistaken?

On a related note, when I enter addresses, the autocomplete feature does not pick up the zip code. I have to manually add it to the text line. Is that normal or have I missed a setting?

#522506

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

Hi Rachel

The intention with the address field is pretty much to enable a marker to be displayed on a Google map at that address.

It uses the Google Maps geocoding service to convert an address into latitude and longitude coordinates for determining the position of the marker, and the stored address text comes from the string returned by the auto-complete service.

Toolset maps uses an intermediary jQuery library (hidden link) which acts as a wrapper for interacting with the Google Maps APIs.

Now, the geocode service does return more information than the address string and coordinates, but these are not used by Toolset Maps, but you can access that information yourself with JavaScript and use it.

You might, for example, add a custom field for the zip code and then automatically populate it from the address look up.

To get you started I set up a test site locally to do the above, automatically updating a custom field (slug "postcode") with the field "postal_code" returned by the Google API when using a post with an address field in the WordPress admin edit screens.

It requires adding some custom Javascript to your site which needs to be available on the admin pages, so you will need to add the code to a file which you enqueue with admin_enqueue_scripts. In my case I added the following to my theme's functions.php file to enqueue a file custom-map.js in the specified location.

/**
 * Enqueue JS file custom-map.js on admin pages
 *
 */
add_action( 'admin_enqueue_scripts', 'custom_enqueue_admin_scripts' );
function custom_enqueue_admin_scripts(){

	wp_enqueue_script( 'custom-map', get_theme_file_uri( 'https://cdn.toolset.com/assets/js/custom-map.js' ), array( 'jquery' ), '1.0', true );
}

The actual content of custom-map.js is:

( 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 );

A custom event "geocode:result" is triggered when the geocoding API returns results, and I use that to trigger my code. If you log result to the console you will be able to inspect what the API returns to see what else you can use and how to access it.

Please be aware, though, that this is very much custom code, which falls outside of our support policy, and I can't help you if you are uncomfortable adding it to your site or are unable to modify it to your requirements.

#523111

Thank you so very much for taking the time to explain how the address field works. This is a huge help, I get that you can't offer support on something so custom but your sample code will give me the start I need!

THANK YOU!

#638860

Hello, thanks for your answer.

So, when you say "filtering by fields of the intermediate post type (or fields of related posts) is due to be added."
What do you mean ? When It will be ok ? Because i have to create a website that need this possibility and i don't know if i have to wait, one day, one week, one month....

For the second question, it is perfect, that i understand is i have ti create a postcode field and with your code this field will be fill automatically ? is that right ?

#911325

I thought I would add to this thread with what I did in order to make this code universal across my site whenever there is a location field present. I created address/state/postalcode/etc. fields and then made them hidden on my forms, but I assigned them classes such as geo_state, geo_postalcode, etc. Then, the JavaScript loops through the Google Maps location information and updates the fields with the correct classes. This way, you don't have to deal with ID's, which can change from form to form.

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

			var element_value = addressComponents[ index ].long_name;
			x = document.getElementsByClassName("geo_house");
			y = x[0].id;
			document.getElementById(y).value = element_value;

                } else if ( addressComponents[ index ].types[0] == "route" ) {

			var element_value = addressComponents[ index ].long_name;
			x = document.getElementsByClassName("geo_street");
			y = x[0].id;
			document.getElementById(y).value = element_value;

                } else if ( addressComponents[ index ].types[0] == "locality" ) {

			var element_value = addressComponents[ index ].long_name;
			x = document.getElementsByClassName("geo_city");
			y = x[0].id;
			document.getElementById(y).value = element_value;

                } else if ( addressComponents[ index ].types[0] == "administrative_area_level_1" ) {

			var element_value = addressComponents[ index ].short_name;
			x = document.getElementsByClassName("geo_state");
			y = x[0].id;
			document.getElementById(y).value = element_value;

                } else if ( addressComponents[ index ].types[0] == "postal_code" ) {

			var element_value = addressComponents[ index ].short_name;
			x = document.getElementsByClassName("geo_postalcode");
			y = x[0].id;
			document.getElementById(y).value = element_value;

                } else if ( addressComponents[ index ].types[0] == "country" ) {

			var element_value = addressComponents[ index ].short_name;
			x = document.getElementsByClassName("geo_country");
			y = x[0].id;
			document.getElementById(y).value = element_value;

                }
 
            } );
 
        } );
 
    } );
 
})( jQuery );

Really hope this becomes a built-in feature of Toolset sometime in the future!!!

- Aaron

#1592387

How to use this script on a frontend form - can't get it to work?

#2067027

Is the code in (REPLY #522506) still valid?