A family of small upgrades to how your property map looks and behaves, so the map feels modern and on-brand on desktop and stays fast and easy to use on phones.
What it does #
Property Map Display is a set of related modules in the Toolkit Hub that each polish a different part of your map. Turn on only the ones you want. Between them they cover the look of your maps, how the markers behave, and how the map works on phones.
- Map Styling gives your maps a custom color theme (for example a soft warm-sand look instead of the stock Google gray). It applies to YOOtheme Pro map elements and to the map on your property detail pages.
- Map Stacking fans out pins that sit on the exact same spot so a guest can reach every property, highlights the marker for whatever property a guest hovers in the list, and controls the colors of the markers and price pills on the search map.
- Mobile Map Default hides the search-results map by default on phones so guests see your listings first, with the map one tap away.
- Explorer Mobile Sheet turns the search page into a full-screen, map-first layout on phones, the way a travel app works.
- Mobile Map Framing, Mobile Map Gestures, Explorer Map Mobile Dock, and Search As I Move Default smooth out the rough edges of the standard search map on phones.
For grouping identical listings (such as a resort’s many matching cabins) into a single search result, see the separate Toolkit: Clustering module.
How to turn it on #
Each piece is its own toggle in the HomeRunner Toolkit Hub. Switch on the ones you want:
- Map Styling
- Map Stacking
- Mobile Map Default
- Explorer Mobile Sheet
- Mobile Map Framing
- Mobile Map Gestures
- Explorer Map Mobile Dock
- Search As I Move Default
Map Styling, Map Stacking, and Explorer Mobile Sheet have settings panels (see Settings below). The rest take effect as soon as they are enabled, with nothing else to configure.
Mobile map experience #
On a phone, a map crammed above a list of properties is hard to read and easy to scroll past. These modules make the map feel like the map view in a travel app, so guests can browse your properties on a phone without fighting the screen.
The most complete option is Explorer Mobile Sheet. It turns your search page into a map-first layout on phones, the way Airbnb’s app works: a full-bleed map fills the screen, and your results sit in a draggable sheet at the bottom with three positions, from nearly full-screen down to a small peek strip over the map. A floating Map and List toggle lets the guest jump straight between the two. Because it owns the whole mobile map layout, it handles its own pin framing.
By default the sheet shows its own compact header on phones (your site icon, a search pill, and a menu button) and hides your theme’s normal mobile navigation underneath it. If your theme’s header still shows through and clashes with that header, turn on Below Theme Navigation instead: the sheet drops its own header and tucks its search pill underneath your theme’s existing mobile nav bar, offset down by however much clearance that bar needs.
Explorer Mobile Sheet replaces Mobile Map Default on phones, so do not turn on both. They are two different mobile layouts, and running them together makes them fight over how the map is positioned. The Hub keeps them apart for you: switching on Explorer Mobile Sheet turns off Mobile Map Default (and Mobile Map Framing, for the same reason), and the other way around.
If you would rather keep the standard search layout and just sand down the rough edges on phones, use the supporting toggles instead of the sheet:
- Mobile Map Framing fits the map to your property pins when it first loads and leaves room at the top for the floating search and filter bar, so pins are never hidden behind it. It re-fits when a guest rotates their phone.
- Mobile Map Gestures makes one-finger panning and two-finger pinch-to-zoom work the way guests expect on a phone, without the page scrolling or zooming by accident. It only affects the big search map and leaves the rest of the page alone.
- Search As I Move Default refreshes the list of properties for the new area as the guest pans or zooms the map, with no separate button to tap.
- Explorer Map Mobile Dock docks a tapped pin’s info card to the bottom of the screen, with the photo on the left and the details on the right, instead of letting it cover the pin the guest just tapped. It works alongside Explorer Mobile Sheet as well as the standard layout.
Each of these is a simple on or off toggle in the Hub with nothing else to set. Because Explorer Mobile Sheet already covers framing on its own, pair the supporting toggles with the standard layout rather than with the sheet.
Map stacking #
When two or more properties sit at the very same spot on the map, their pins land right on top of each other and a guest can only see one. Map Stacking notices these overlaps and, when the guest taps the stack, fans the pins out (a “spiderfy” effect) so each property gets its own tappable marker. If the guest then pans or zooms so the open stack scrolls off the screen, it closes itself again, so a fanned-out stack never clings to the edge of the map. It also lets you set the colors of the markers and price pills on the search map (see Settings).
When a guest hovers a property in the results list, Map Stacking highlights that property’s marker on the map so the guest can spot it without hunting for it. You can set the highlight color with the Focus Highlight Color setting. Turn the module on in the Hub. It works alongside the mobile map modules.
Map Stacking works on both kinds of map your site might use, the Leaflet map and Google Maps. It matches whichever one your site is set to on its own, so there is nothing to pick. If your search map is set to group nearby pins into a single numbered marker when it is zoomed out, Map Stacking works with that grouping too: the numbered markers split apart as the guest zooms in, and the fan-out still works for any pins that share the exact same spot. That zoomed-out grouping is a setting on the map itself, not part of this module.
Map styling #
Stock Google maps come in a flat gray that rarely matches a property brand. Map Styling lets you give your maps a custom color theme so they look like part of your site rather than a borrowed Google screen.
You set the look by pasting a map style array into the Style JSON setting. The easiest way to get one is to pick or build a theme on Snazzy Maps and copy its style array, but any valid map style array works. Leave the box blank and your maps use the bundled warm-sand theme instead.
The style applies to two places: the YOOtheme map elements you place on your pages, and the map on your property detail pages. The module works out which kind of map is on each page on its own, so there is nothing extra to set for it to find the right one. The big search and explorer map is left alone on purpose, because it already has its own color setting in the HomeRunner Plugin, which keeps the two from clashing.
Settings #
Map Styling #
| Setting | What it controls |
|---|---|
| Apply to YOOtheme Maps | Turns the custom style on or off for YOOtheme map elements placed on your pages. On by default. |
| Apply to HomeRunner Property Maps | Turns the custom style on or off for the Google map on your single-property pages. On by default. |
| Style JSON | The map style array to apply. Paste a theme exported from Snazzy Maps, or any valid style array. Leave it blank and save to use the built-in warm-sand theme. Invalid JSON is rejected and nothing is saved. |
Map Stacking #
| Setting | What it controls |
|---|---|
| Stacked Badge Color | The background color of the price pill on each marker. Default is a dark navy. |
| Badge Text Color | The text color for the price and count on the badges. Default is white. |
| Count Bubble Color | The fill color of the small count shown on a stacked marker. Default is red. |
| Center Dot Color | The color of the dot shown at the center of a fanned-out stack. Default is a dark navy. |
| Connector Line Color | The color of the dashed lines that connect the fanned-out pins back to the center. Default is a dark navy. |
| Focus Highlight Color | The outline color shown on a marker when a guest hovers its property in the results list. Default is blue. |
| Background Fade Opacity | How much the other markers fade while a stack is open, from 0 (fully hidden) to 1 (no fade). Default is 0.4. |
| Auto-enable Map Search | Checks the explorer’s “Search as I move the map” option automatically when the explorer loads. On by default. |
Explorer Mobile Sheet #
| Setting | What it controls |
|---|---|
| Below Theme Navigation | Off by default, showing the sheet’s own compact header and hiding your theme’s mobile nav. Turn it on if your theme’s mobile header still shows through and clashes with the sheet; the sheet then relies on your theme’s nav bar instead of its own. |
| Vertical Offset (px) | Only used when Below Theme Navigation is on. How far to push the sheet’s search pill down so it clears your theme’s mobile header. Default 80px; raise or lower it to match your theme’s header height. |
Tips #
- For a quick win on phones, switch on Explorer Mobile Sheet so visitors get the map-first, app-style layout, or use Mobile Map Default if you would rather they land on your listings first with the map one tap away. Do not enable both.
- If your theme’s mobile header shows through behind Explorer Mobile Sheet’s own header, turn on Below Theme Navigation and tune the Vertical Offset until the search pill clears your theme’s nav bar.
- On the standard layout, turning on Mobile Map Gestures, Mobile Map Framing, and Search As I Move Default together makes the search map feel native: smooth one-finger pan and pinch-zoom, pins framed clear of the search controls, and results that refresh as the guest explores.
- If you want maps that match your brand colors, Map Styling is the place to start. You can paste a ready-made theme or keep the built-in warm-sand look.
- For collapsing identical listings into one search result, pair this with Toolkit: Clustering. For overall site look-and-feel beyond maps, see HomeRunner Skin.