A search box on any page
Instead of a "Find a store" button, give visitors a box on your homepage, footer or a landing page: "Enter your postcode", and go. They arrive on your locator page with the results already showing.
You need a locator embedded on one page of your site. If you do not have that yet, the quickstart gets you there.
Add the form
Paste this where the box should appear, and replace the action with the address of your locator page.
<form action="https://example.com/locations" method="get">
<input type="text" name="loc_near" placeholder="Town or postcode" />
<button type="submit">Find a store</button>
</form>Submitting sends the visitor to the locator page with ?loc_near= and whatever they typed. The locator reads it on load, geocodes it exactly as if it had been typed into its own search box, and lists the nearest locations.
The form has no styling of its own, so it takes your site's styles. Give it a class and style it like any other form on the page.
Add a filter
A dropdown lets a visitor choose a type of location before they search. Use the tag's slug as the option value: the name in lower case with hyphens for spaces, so "Service Center" becomes service-center.
<form action="https://example.com/locations" method="get">
<input type="text" name="loc_near" placeholder="Town or postcode" />
<select name="loc_tags">
<option value="">All locations</option>
<option value="authorized-dealer">Authorized dealer</option>
<option value="service-center">Service center</option>
</select>
<button type="submit">Search</button>
</form>Several tags go in one value separated by commas: value="authorized-dealer,service-center".
Keyword search instead
If your locator searches by keyword rather than by place (the search behaviour setting under search settings), name the input loc_q instead. The visitor's text is matched against location names and addresses on arrival.
A search bar on the same page as the locator
When the box and the locator share a page, a form reload is the wrong tool. Call the locator directly from the JavaScript API and the results update in place.
document.querySelector("#hero-search").addEventListener("submit", async (event) => {
event.preventDefault();
const locator = await window.HandledLocator.ready();
await locator.searchNear(event.target.elements.place.value);
locator.scrollIntoView({ behavior: "smooth" });
});How it works
The locator mirrors its search state into the page URL under four parameters, and reads them back on load. That is what a shared link, a campaign link and this form all rely on. The full list, and what to put in each, is on the pre-filled search page.
The parameter names carry a loc_ prefix on purpose. Your site probably already uses q or s for its own search, and a locator that took over those would break the page it lives on.
Common questions
Can the form open the locator page in a new tab? Add target="_blank" to the form. The visitor's own page stays where it was.
What if the place cannot be found? The locator shows its usual "we could not find that place" message with the box filled in, so the visitor can correct it. Nothing else on the page is affected.
Does the visitor's location work from a form? No. The browser position prompt has to be a click on the locator page. Leave the box empty and the locator's own "use my location" button is there when they land.