[Resolved] Output location field

[Author]

Posts

[Nicholas]

Hello Toolset Team.

I would like to separate a google maps autocompleted address into it's individual components.
As demonstrated here:
hidden link

I visited the following urls: https://toolset.com/forums/topic/latlong-coordinates/
https://toolset.com/forums/topic/add-google-autocomplete-to-a-text-field/#post-310375

But haven't had any success implementing it.

My cred fields that should be populate with the components of the google address:

wpcf-street-address
wpcf-street-number
wpcf-city
wpcf-postal-code
wpcf-state
wpcf-country

I appreaciate any help and guidance.

Thank you.

Nicholas

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+00:00)]

Hi Nicholas

The Toolset Maps plugin uses the google geocoding api but uses the formatted address to populate the address field rather than all of the individual address components.

You can piggy back on the address look up and use the results yourself to additionally extract the full set of results returned by google.

I created a simple test site to do this with some code reproduced below.

You can see it working in a CRED form in the attached screen recording. Please note, though, that I am demonstrating how I was able to do it myself so that you can adapt the solution to your needs, but I can't write something specific for you or even support the custom code I provide, it is for illustration.

So I created a custom post type called places and a group of custom fields as per your list in the question, which are all simple single line text fields. I additionally added an address field (slug types-address) to provide the google maps functionality that we will piggyback on.

The Types address input field uses the google autocomplete feature, with which a special event is available to hook into, namely "geocode:results".

So we can add an event listener for this, and we will have an object "result" available from which we can extract the different address components. In my code I log the address_components array to the console which you can inspect to see what is returned. You should be aware that the results might not be consistent depending on location, i.e. a different number of address components is returned for a US search than for a UK search. My code sample works with a US address.

I auto-generated the CRED form to publish a Place so that it includes all of the required fields.

And in the custom JS section I added the following code:

( function( $ ) {
	$( document ).ready( function(){

		$('input[name*="wpcf-types-address"]').bind( "geocode:result", function( event, result ) {

			console.log( result.address_components );

	        	$('input[name*="wpcf-street-address"]').val( result.address_components[1].long_name );
			$('input[name*="wpcf-street-number"]').val( result.address_components[0].long_name );
			$('input[name*="wpcf-city"]').val( result.address_components[4].long_name );
			$('input[name*="wpcf-postal-code"]').val( result.address_components[8].long_name );
			$('input[name*="wpcf-state"]').val( result.address_components[6].short_name );
			$('input[name*="wpcf-country"]').val( result.address_components[7].long_name );

		});

	});
})( jQuery );

[Nicholas]

Nigel. Can I tell you something?

You are so awesome. Thank you very much.
Sometimes I wish I could buy you guys a cup of coffe. Unfortunately this feature isn't available. Can we make it a feature request? haha

One more thing. What controls the language of the toolset google maps autocomplete functionality?

Because I once tried to add the toolset google maps autocomplete functionality to a text field and noticed that some of the cities weren't translated to my language. I.e. Vienna wasn't translated to Wien, even though I used this bit of js:

options = {
language: 'de',
types: ['(cities)'],
componentRestrictions: { country: "at" }
};

If you want me to open up a new ticket I'll go ahead and do so.

Best regards

Nicholas

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+00:00)]

Hi Nicholas

When you say you tried to add "the toolset google maps autocomplete functionality" what exactly do you mean?

The "Toolset" maps functionality means using the address custom fields and the admin UI, and you don't get to set options the way you describe in that post, so I guess you were cooking up something custom unless I have misunderstood.

Anyway, as this is not the same topic as such you might post it as a new thread. You are welcome to assign it to me and I'll be happy to follow up. (Maybe post it in the morning so that it doesn't get automatically re-assigned to someone in a different timezone if you do.)

[Nicholas]

Thanks again.

I will. Have a nice evening.

[Nicholas]

Ups. this is resolved now.