DEMO: using Google Maps AutoComplete to auto-fill street, suburb, state, postal cost upon search.

2025-12-03T100554

Method-1: via Webform JavaScript

As of March 1st, 2025, google.maps.places.Autocomplete is not available to new customers. Although this API is not scheduled to be discontinued, but google.maps.places.PlaceAutocompleteElement is recommended over google.maps.places.Autocomplete.

Method-1a: via google.maps.places.PlaceAutocompleteElement

  1. Create any field that will later be replaced with the PlaceAutocompleteElement, here I’ll create a search field to showcase, see screenshot
  2. For all the address related fields (e.g. street, suburb, city, country) add custom element CSS classes respectively to be later used by JavaScript to fill their values, see screenshot
  3. Add the following JavaScript to the Webform’s settings: demo-autocompelte-using-PlaceAutocompleteElement.js (Replace API_KEY on the bottom of the file with your Google Maps API key)
  4. Review the outcome of step1 to step3: outcome-gif (if your API key is invalid you’ll get the following warning as you start typing in the address: Google Maps JavaScript API warning: InvalidKey in your console)

Method-1b: via google.maps.places.Autocomplete (deprecated)

  1. Create a plain text field in webform to use as the “search field” for address, see screenshot

  2. For all the fields relating to address add custom class to be used later by JavaScript (here is an example: screenshot of add .webform-xx-street1 class to the field “Street1”)

  3. Add the following JavaScript (at Webform > Settings > CSS/JS) that uses Google Place API to fill address: demo-auto-complete.js (*alternatively if you don’t want to expose your API in the webform Drupal backend settings, you can also include the Place API via Drupal library: your-theme-name.libraries.yml, page–webform.html.twig; Here’s a full example webform that uses this approach: webform-export-yaml-file and where-to-past-it-to-screenshot)

  4. Review the outcome of step1 to step3: outcome-gif (if your API key is invalid you might see your search box turn grey (invalid) and get the following error in your console: Failed to load resource: the server responded with a status of 403 ), see screenshot: sample-console-error-api-invalid)

  5. You can go one step further and have multiple pairs of “search + street/city/state/post input” as well, see the demo javascript file: auto-complete-multiple-input.js, and here’s the final outcome: multiple-autocomplete-example

Method-2: 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 (see: screenshot). 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.)

Method-2: via Custom Module/Theme

(I have NOT attempted to build a demo of this approach myself, but I think this is also a worth exploring option for some plug and play scenario)

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

(function (Drupal, once) {
  Drupal.behaviors.googlePlacesWebform = {
    attach(context) {
      once('google-places', 'input[data-drupal-selector="edit-address"]', context)
        .forEach((input) => {
          	... Google Maps AutoComplete Logic (similar to previous method) ...
          });
        });
    }
  };
})(Drupal, once);

file: my_module_or_theme.module

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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';
}

(*misc) 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 APIs + Maps JavaScript API, see screenshot: link)

To find existing API key:

2025-11-24T150014

To create a new API key:

2025-11-24T150014-

Reference