Frontend Submission - Google Maps - Custom Binding

Support MB Frontend Submission Frontend Submission - Google Maps - Custom Binding

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #45746
    CodogCodog
    Participant

    Hi there,
    I have a frontend submission form that contains a Google Map and address field that uses the Geocoding API for autocomplete. All works as expected!

    However, I don't seem to be able to get the "Custom Binding" working as documented here

    Here is my code with an attempt to bind the 'City' & 'Country' to a hidden custom field:

    			
      // Map field.
      [
      'id'            => 'location_map',
      'type'          => 'map',
      'api_key'       => 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      'std'           => '51.5074,-0.1278,15',
      'address_field' => 'location_address',
      ],
      // Address field.
      [
      'id'   => 'location_address',
      'name' => __( 'Address', 'text-domain' ),
      'type' => 'text',
      'placeholder'   => 'Enter address...',
      'desc'     => __( 'Enter the complete address.', 'text-domain' ),
      'required' => true,
      ],
      // Hidden field to store the city and country
      [
      'id'   => 'city_country',
      'type' => 'hidden',
      'binding' => 'city + " " + country',
      'std'  => 'null',
      ],
    

    Expected result: Autocomplete - City and Country values to be added to hidden field.
    Actual result: Returns nothing?

    I have also tried this with a plain text field and the result is the same?

    What am I missing?

    Thanks in advance 🙂

    #45752
    PeterPeter
    Moderator

    Hello,

    Do you add the setting geo to the field group settings? Please follow the documentation https://docs.metabox.io/extensions/meta-box-geolocation/#field-group-settings

    #45753
    CodogCodog
    Participant

    Hi Peter, thanks for the response. Yeah this was the bit I was unclear about? I assume you mean adding this:

    
    'geo' => [
        'api_key' => 'xxxxxxxxxxxxxxxxxxxxxxx',
    ],
    

    To some field group? Do you mean I need to wrap my "Map Field, Address Field , Hidden field" in a "Field Group and add the above? Not clear to me?

    As I am strictly doing this with code I would be grateful if you could show me a simple example?

    #45761
    PeterPeter
    Moderator

    Hello,

    If you use the code to register the meta box (field group in the builder UI), you need to add geo to the meta box settings. For example:

    add_filter( 'rwmb_meta_boxes', function ( $meta_boxes ) {
        $meta_boxes[] = [
            'title'      => 'Event details',
            'post_types' => 'event',
            'geo' => [
                'api_key' => 'YOUR API KEY',
            ],
            'fields'     => [
                ...
            ],
        ];
    
        return $meta_boxes;
    } );

    https://docs.metabox.io/creating-fields-with-code/

    #48251
    CodogCodog
    Participant

    Hi there,
    I never got this working. I have re-visited your suggestion (from above):

    add_filter( 'rwmb_meta_boxes', function ( $meta_boxes ) {
        $meta_boxes[] = [
            'title'      => 'Event details',
            'post_types' => 'event',
            'geo' => [
                'api_key' => 'YOUR API KEY',
            ],
            'fields'     => [
                ...
            ],
        ];
    
        return $meta_boxes;
    } );

    But this binding never seems to work for me?

    1. I have set up an unrestricted API key with all available API's.
    2. I have added the geo parameter to my Metabox (Exactly as suggested):
    3. My full test implementation is like this:

    add_filter( 'rwmb_meta_boxes', function ( $meta_boxes ) {
        $meta_boxes[] = [
            'title'      => 'Event details',
            'post_types' => 'event',
            'geo' => [
                'api_key' => 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',// Unrestricted API Key
            ],
            'fields'     => [
                // Map field.
                [
                'id'            => 'location_map',
                'type'          => 'map',
                'api_key'       => 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
                'std'           => '51.5074,-0.1278,15',
                'address_field' => 'location_address',
                ],
                // Address field.
                [
                'id'   => 'location_address',
                'name' => __( 'Address', 'text-domain' ),
                'type' => 'text',
                'placeholder'   => 'Enter address...',
                'desc'     => __( 'Enter the complete address.', 'text-domain' ),
                'required' => true,
                ],
                // Hidden field to store the city and country
                [
                'id'   => 'city_country',
                'type' => 'hidden',
                'binding' => 'city + " " + country',
                'std'  => 'null',
                ],
            ],
        ];
    
        return $meta_boxes;
    } );

    I am using a clean install of WP:

    - WP 6.8.1
    - Metabox Version 5.10.9
    - AIO Version 2.1.1
    - PHP 8.3
    - MYSQL 8.0.35

    I have the MB Geolocation extension on.
    I see no console log errors.
    I see no debug.log errors.

    Can you confirm that this implementation works for you? (or Not). I cannot get this feature to work for love or money?

    Thanks.

    #48255
    PeterPeter
    Moderator

    Hello,

    It works properly on my demo site. Please note that the city field is not supported when using Google Maps. You should use locality instead of city. Following the documentation https://docs.metabox.io/extensions/meta-box-geolocation/#other-fields
    And check my screen record https://drive.google.com/file/d/1dZqoujJ89l3wUoPsHU_p5f4f6jl4faQA/view?usp=sharing

    #48258
    CodogCodog
    Participant

    Thanks for the clarification Peter!

    That was really helpful 🙂

    I will try this myself.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.