[Resolved] How to create a location field

[Author]

Posts

[kyleH-6]

Hi there,

I'm trying to build a form with a field that gets locations and the timezone they're in.

Can't see any documentation anywhere. Do you have any recommendations of how to do this?

[Luo Yang]

Hello,

1) You can follow our document to create the custom address field:
https://toolset.com/course-lesson/installing-toolset-maps-and-adding-address-fields/

2) If you want to setup different location and the timezone for each WordPress user, you can setup one custom user field group with two custom fields:
- Location (custom address field)
- timezone (custom select field)
https://toolset.com/documentation/customizing-sites-using-php/creating-custom-user-profiles/
and put above fields into Toolset user forms:
Creating user form:
https://toolset.com/course-lesson/creating-forms-for-registering-users/
Editing user form:
https://toolset.com/course-lesson/using-forms-to-create-an-edit-your-profile-page/

[kyleH-6]

Hi Luo,

thanks for getting back to me. However with the address field, I just need the city and country, with the timezone calculated automatically in the background.

As far as i can see the address field only allows a user to set a full address?

[Luo Yang]

There isn't such kind of built-in feature within Toolset plugins, but it is possible with some custom JS codes, see below sandbox website:
Login URL: hidden link
1) Create some custom fields:
hidden link
- My Address( address field)
- My country(single line field)
- My city(single line field)
- My timezone(single line field)

2) Create a post form, and display above custom fields
hidden link
in section "JS Editor", add below JS codes:

jQuery( document ).on( 'geocode:result', '.js-toolset-google-map-geocomplete-added', function(evt, data) {
  //console.log(data);
  var time_zone = tzlookup(data.geometry.location.lat(), data.geometry.location.lng());
  document.querySelector("input[name='wpcf-my-timezone']").value = time_zone;
  for (const component of data.address_components) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }
      case "locality":
        document.querySelector("input[name='wpcf-my-city']").value = component.long_name;
        break;
/**
      case "administrative_area_level_1": {
        document.querySelector("input[name='wpcf-region_code']").value = component.short_name;
        break;
      }
**/
      case "country":
        document.querySelector("input[name='wpcf-my-country']").value = component.long_name;
        break;
    }
  }
});

...

The rest of custom JS codes are copied from:
hidden link
file "tz.js"

Test above post form in frontend:
hidden link
try to setup value in field "My address", it will populate other custom fields automatically.

It is only a demo for your reference, you can customize it as what you want, for example, you can hide other fields with CSS codes.

More helps:
hidden link
hidden link

[kyleH-6]

I'm very grateful for this response, just in my use case the address won't be known. It's the birth location I'm trying to extract, most people don't know exactly where they were born.

can the address field handle just city and country?

Best regards
kyle

[Luo Yang]

Yes, you can input just country + city name into the custom address field, it will be able to get the timezone value too