Skip to content
Docs

Google Places Autocomplete

The Google Place Autocomplete field type turns any location field into a smart search box backed by the Google Places API. As a member types, the browser shows matching place suggestions — cities, neighbourhoods, businesses, addresses — and the member picks the one that matches.

This gives you consistent, structured location data instead of the unpredictable spellings you get from a plain text field (“NYC”, “New York”, “new york city”, “New York, NY” all mean the same thing but would not match each other in a search).

Setting Up the API Key

Section titled “Setting Up the API Key”

Before any Google Place Autocomplete field will work, you need a Google API key with the Places API enabled.

Step 1: Get a key

  1. Go to Google Cloud Console.
  2. Create a project (or select an existing one).
  3. Enable the Places API and Maps JavaScript API for the project.
  4. Create an API key under APIs & Services > Credentials.

Google has a usage-based pricing model for the Places API. For most community sites the volume is small enough to stay within the free tier, but check Google’s pricing page to understand the limits.

Step 2: Add the key to Profile Pro

  1. Go to WB Plugins > Profile Pro > General.
  2. Paste the key into the Google API key field.
  3. Click Verify. The plugin makes a test request to the Google Places Nearby Search endpoint to confirm the key works.
  4. If the key is valid, the Verify button shows a checkmark.
  5. Click Save Settings.

Default language

The General tab also has a Default language field. This is a language code (for example en, fr, de) passed to the Google Places API. It affects what language the autocomplete suggestions appear in. The default is en.

Adding a Place Autocomplete Field

Section titled “Adding a Place Autocomplete Field”

Once the API key is verified, you can create fields with this type:

  1. Go to WB Plugins > Profile Pro > Field Settings.
  2. In the Add New Field form, enter a Field Title (for example “Current City” or “Hometown”).
  3. In the Field Type dropdown, select Google Place Autocomplete.
  4. Choose the group this field belongs to.
  5. Set Display, Required, and other options as needed.
  6. Click Add, then Save Settings.

Member Experience

Section titled “Member Experience”

When a member visits their profile edit form and encounters a Google Place Autocomplete field:

  1. They start typing a location into the input.
  2. After a short delay, a dropdown of matching place suggestions appears below the input.
  3. They click a suggestion to select it.
  4. The full place name is placed in a hidden input and submitted with the form.

If the API key is not configured or is invalid, the field falls back to a plain text input — members can still type a location, but there is no autocomplete.

Section titled “Using Place Autocomplete in Profile Search”

When you add a Place Autocomplete field to the profile search builder, the search input on the members directory also shows autocomplete suggestions (if the API key is active). This means visitors can type a city name, pick from the suggestions, and find all members who listed that exact place.

Without the API key, the search input works as a plain text “contains” search.

Troubleshooting

Section titled “Troubleshooting”

The Verify button shows “not-verified”

Check that:

  • The key is copied correctly with no extra spaces.
  • The Places API is enabled in your Google Cloud project.
  • Your project has billing enabled (Google requires a billing account even for free-tier usage).
  • The key has no API restrictions that would block requests from your server IP.

Autocomplete suggestions do not appear on the frontend

Check that:

  • The API key is saved and verified (green checkmark on the General tab).
  • The Maps JavaScript API is enabled in your Google Cloud project, not just the Places API.
  • Your site is not blocking outbound requests to maps.googleapis.com.
  • There are no JavaScript errors in the browser console related to the Google Maps script.

Fields show as plain text inputs after saving the key

Reload the settings page. The Verify button needs to return a success response and update the wbbpp_googlemapapi_status option before the Google Maps script is enqueued on the frontend.