Cleans up your explorer map’s control buttons into a modern, Airbnb-style layout, and lets you resize how much of the results page the map takes up on desktop.
What it does #
The stock explorer map ships with a cluttered set of controls: separate zoom buttons, home / previous / next marker buttons nobody uses, a plain checkbox for search-as-you-move, and a text link to hide the map. Map Controls replaces all of that with a cleaner layout guests already recognize from booking sites like Airbnb.
- A floating zoom stack replaces the old zoom buttons.
- The “search as I move the map” checkbox becomes a pill centered at the top of the map.
- A hide/show toggle sits on the map itself, with collapse chevrons while the map is visible and a floating “Show map” pill once it is hidden. The old “HIDE MAP” text link is removed from the results header on desktop.
- The legacy home, previous, and next marker buttons are removed, since guests do not use them.
On desktop, Map Controls also lets you set how wide the map is relative to the results grid, with separate widths for different screen sizes so the split looks right whether the window is a laptop or an ultrawide monitor.
How to turn it on #
1. Enable the module #
In the HomeRunner Toolkit Hub, switch on Map Controls. It takes effect immediately on your explorer/search map.
2. Adjust the fullscreen button and map width, if needed #
Open Map Controls in the Hub to decide whether to keep the map’s fullscreen button and to set the map’s width at each desktop breakpoint (see Settings below). The defaults work for most sites.
Settings #
| Setting | What it controls |
|---|---|
| Fullscreen button | Keeps the map’s fullscreen button, restyled to match the new controls. Off by default, since Airbnb’s map has no fullscreen control. |
| Map width per breakpoint (%) | How much of the explorer the map occupies while visible, set separately for three desktop width ranges (960–1199px, 1200–1599px, and 1600px and up). The results grid takes the rest. Accepts 20–70. Leave a range blank to keep the default 45% split. Mobile layouts are unaffected. |
Tips #
- Map Controls works alongside Toolkit: Map All Pins and the other modules in Toolkit: Property Map Display: it only reworks the control chrome, so pin behavior, stacking, and styling keep working exactly as configured elsewhere.
- If your results grid feels cramped or too spacious next to the map on desktop, tune the Map width per breakpoint setting for the screen sizes your visitors actually use rather than guessing at one width for every monitor.
- Leave the Fullscreen button off unless your guests specifically ask for it. It is not part of the Airbnb-style layout this module is modeled on.