Skip Navigation

[Resolved] Output location field

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 5 replies, has 2 voices.

Last updated by Nicholas 5 years, 1 month ago.

Assigned support staff: Nigel.

Author
Posts
#454289

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

#454435

Nigel
Supporter

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

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

maps.gif

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 );
#454464

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

#454528

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.)

#454534

Thanks again.

I will. Have a nice evening.

#454536

Ups. this is resolved now.