The Results widget should be placed on your designated "results" page in your website as part of the foundation page setup, and will display the properties resulting from a search.
Only 1 x Google map is permitted per page.
Your choice of a 'map' on a page can be from either the results widget OR the map display widget.
If you are displaying an additional Google map on the same page (not using Buying Buddy widgets) then it should be removed.
This widget is mobile responsive and will expand to fill any container / space made available in your website page design.
- Minimum width: Designed for mobile
- Maximum width: Unlimited
Colors and Background
- Widget Themes can be used to apply predefined, or your own, color schemes.
- Uses 'Widget Background' color from the applied widget theme
There are 3 layouts for presenting results:
- A list of the properties displayed in a grid layout (this is the initial default view)
- A split screen that shows the map and properties.
- Just the map.
The Results Widget can be show full screen using the full-screen button in the header section.
Or, if you are using WordPress and have installed the MBB WordPress plugin, the equivalent shortcode for this widget would be:
2. Initial Results View (split-screen or properties?)
The default view presents results as a list of properties in the grid layout - the map is hidden.
The user can use the Show Map button to see the split screen.
To show the map (split screen) by default when the results loads, use the "tab" filter option as follows:
<div id="MBBv3_ListingResults" filter="tab:map"></div>
[mbb_widget id="MBBv3ListingResults" filter="tab:map"]
3. Set the Initial Map View Center Point and Zoom
Choose the center point and zoom level you want for the initial map view.
This filter requires latitude and longitude values so use the LAC Wizard to create these filter values.
Remember the view of the map does not affect the result, just the view.
4. Remove the Menu and Save Search button
- filter="header-menu:false" This will hide the 'menu' icon and the 'save-search' button in the header.
Below is a visual example of a search sequence on your website:
- A Search will go to your "results" page and show results using the Results Widget.
- Clicking on "View Details" for a property will go to your "details" page and show property details using the Property Details Widget