🔥 Try Handled Locator free for 7 days.Start free trial

Design and maps

Customize layout and result cards

Arrange search, filters, maps, result cards, custom actions and popup fields across desktop and mobile layouts.

Choose a layout

Open Configure → Layout & fields and start with the relationship between the map and results. Handled supports seven layouts: list left, list right, list below, grid below, list only, grid only and map only.

Side-by-side layouts expose a Result column width control from 25% to 75%. Grid layouts expose the number of columns. Widget width, Map height and List height control the overall footprint without changing the embed.

Place search and filters

Search and filters can sit in the top toolbar, directly above the results, or be hidden when the surrounding page already provides that interaction. Add the optional magnifying glass when the search field needs to remain recognizable in a narrow layout.

Use inline filters for a short visible choice and dropdowns for larger groups. Filter placement is independent of search placement, so a design can keep search over the map while filters remain with the list.

Shape the result cards

Use the field-layout editor to decide what appears in result cards, the expanded detail view and map popups. The same saved location can carry more information than any one surface needs.

Result controls include left or centered text, browser or themed scrollbars, distance beside the details or below the actions, and three selected-result treatments: border, leading stripe or tinted background. Add an outer frame when the locator needs a defined boundary against the website section around it.

Custom fields can render as facts or actions. Actions can carry their own label, URL, color and icon. Popup layouts support one or two columns and can include the weekly hours table when that field is placed there.

Connect the map and list

Choose whether selecting a result opens it on the map, opens its website or does nothing. Marker clicks can scroll to and highlight the matching result. Map movement can update the visible list when visitors browse geographically.

Keep these behaviors aligned. A marker that highlights a card but leaves it outside the scrollable list feels broken even when both parts technically updated.

Check the responsive result

  1. 1

    Start wide

    Confirm column width, card density and popup content in the intended desktop container.
  2. 2

    Narrow the preview

    Check where search and filters wrap, and make sure the result list remains reachable below the map.
  3. 3

    Use real content

    Test a long location name, address, several categories, weekly hours and every configured action.
  4. 4

    Save and reopen

    Verify the same configuration in the expanded preview and on the installed page.