Method-1: via Contributed Modules

  1. install Webform Address Autocomplete module (link) via: composer require 'drupal/webform_address_autocomplete:^1.0'

  2. enable the module via drush pm:install webform_address_autocomplete

  3. configure the Webform Address Autocomplete module by adding Google Place API key:

    2025-11-24T145414

    (you can follow the instruction in the upcoming section to get your Google Place API key)

  4. Find the extra Webform “Address autocomplete” element under “Advanced elements”, and add it to the webform (and delete the original address field if required):

    2025-11-24T151848

  5. trying out entering address in the new address autocomplete field, and use the drop down menu to select the matching result:

    2025-11-24T152648

    If the auto-complete doesn’t work, open F12 developer tool network panel, and check if the response of the /addresses?q=... request is empty. If yes, this is likely because your API key is invalid (potentially it can be caused if you don’t have a billing card bound to the account)

    2025-11-24T152240

    Method-2: via Custom Module/Theme (with JavaScript)

    (useful for GovCMS SASS client that doesn’t allow extra module to be installed)

    file: my_module_or_theme.libraries.yml

    1
2
3
4
5
6
7

    custom_google_places_autocomplete:
  js:
    https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places: { type: external }
    js/custom-google-places-webform.js: {}
  dependencies:
    - core/drupal
    - core/once

    file: js/custom-google-places-webform.js

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    (function (Drupal, once) {
  Drupal.behaviors.googlePlacesWebform = {
    attach(context) {
      once('google-places', 'input[data-drupal-selector="edit-address"]', context)
        .forEach((input) => {
          const ac = new google.maps.places.Autocomplete(input, {
            types: ['address'],
            // componentRestrictions: { country: 'au' }, // optional
            fields: ['address_components', 'formatted_address'],
          });

          ac.addListener('place_changed', () => {
            const place = ac.getPlace();
            input.value = place.formatted_address || input.value;

            // If you have separate fields, map components here.
            // Example:
            // const comps = place.address_components || [];
          });
        });
    }
  };
})(Drupal, once);

    file: my_module_or_theme.module

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

    use Drupal\Core\Form\FormStateInterface;

function my_module_form_webform_submission_form_alter(
  array &$form,
  FormStateInterface $form_state,
  $form_id
) {
  // Attach only to a specific webform if you want:
  // if ($form_state->getFormObject()->getWebform()->id() !== 'contact') return;

  $form['#attached']['library'][] = 'my_module/custom_google_places_autocomplete';
}

    (*optional) How to Get Your Google Place API Key

    You can find your Google Place API key via the following steps:

    1. start at Google Cloud Console home page
    2. search “Place API” and enable both options
    3. search “Credentials” to go to “Keys and Credentials” page, and copy your API keys there (or create one using the “+ Create Credentials” button on the top, and restrict it to the only have access to the Place API, see screenshot: link)

    2025-11-24T150014

Reference