Custom Plugin

WordPress plugin that adds a site search input with Google Places Autocomplete.

by Geoffrey · github.com/geoffreybolton/custom-plugin

★ 0stars

0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/geoffreybolton/custom-plugin/archive/refs/heads/main.zip

Readme github.com/geoffreybolton/custom-plugin ↗

A small WordPress plugin that outputs a site search input and wires it up to Google Places Autocomplete.

Install

Copy custom-plugin/ into wp-content/plugins/.
Activate Custom Plugin in the WordPress admin.

Use

Add this shortcode anywhere shortcodes are supported:

[wpse-add-google-places-autocomplete]

Runtime behavior

The front-end script is enqueued with jquery as a dependency.

When the shortcode renders, the plugin prints inline scripts that load the Google Maps JS API (Places) and define window.initAutocomplete(). On DOMContentLoaded, public/my-plugin-script.js calls window.initAutocomplete() if it exists.

initAutocomplete() imports the Places library via google.maps.importLibrary("places"), attaches new Autocomplete(input) to each .search-input element, and listens for place_changed to read the selected place via autocomplete.getPlace().

Assets

public/my-plugin-style.css
public/my-plugin-script.js

Rendered markup

div.search-container
form#searchform.searchform (GET to home_url('/'))
input.search-input (name="s")
div#search-address

Google Maps loader config

key: "apikey"
v: "weekly"
libraries: ["places"]

Files

custom-plugin.php plugin entry, enqueue, shortcode, inline scripts, and HTML output
public/my-plugin-script.js DOM-ready call into window.initAutocomplete()
public/my-plugin-style.css layout styling and responsive adjustments

License

GPL v2 or later (GPL-2.0-or-later). See LICENSE.