The Map Display widget displays properties on an interactive map. A Search Filter can be applied to specify the properties to be shown.
If the Search Filter includes a polygon area, then an outline of the Polygon will be shown on the map. (If you use a shape in a filter then be aware that a large number of vertices will slow down the query). The initial view of the map will automatically zoom / pan to an appropriate presentation that shows all properties being returned.
A Google Maps API key is required.
NOTE: If you wish to provide a map to users for searching, then use the Results widget.
You must still maintain a Results Foundation page, but the Results widget can be displayed like any other general widget on other pages too.
Use filter "tab:map" to force the map view to be shown initially.
NOTE: Only 1 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.
TIP: By adding an initial search filter you can ensure that the map shows the area you want to be covered straight away. The filter can be a city, zip, or even a polygon!
The Map Widget is Interactive which means that users can adjust search parameters to dynamically change the map results.
- If a polygon outline is shown, the vertices may be adjusted
- Full screen mode is available too
This widget is mobile responsive and will expand to fill any container / space made available in your website page design.
Layout and Size
- Uses container queries for dynamic adaptation to any placement context
- More versatile than standard "mobile responsive" approaches (adapts to container, not just screen size)
- Ensures consistent user experience across all digital environments
- 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
Pagination
When showing a grid of properties (either sidebar or when map is hidden) the pagination of properties (i.e. how many you see and how many return when you click "More") is handled automatically.
Consequently the filter parameter for "limit" is ignored.
Limitations
- A page can only have one Google map
- The Map Widget cannot be combined on a page with the Results widget or any other independent Google map display
- The maximum number of property results that can be displayed is 5000. If you use a shape in a filter then be aware that a large number of vertices will slow down the query.
- Only one polygon can be shown on the map
Parameters
1. id='MBBv3_InteractiveMap' (required)
This defines the widget to be the Map Display Widget:
<div id="MBBv3_InteractiveMap"></div>
[mbb_widget id="InteractiveMap"]
2. filter= (optional)
Specify the Search Filter. Using a Filter with the widget is optional, but allows you to completely specify the types of properties you want to display using any available MLS criteria. (e.g. foreclosures in Arvada, listings between 300,000 to 400,000 in Denver, etc.) As with all searches (not just the map) a map area / shape can be included as part of the filter parameters. If this is applied to a map widget, then the map will show the shape outline.
- filter=mapType:{ROADMAP | SATELLITE | HYBRID | TERRAIN}
Use this filter to set the initial map view type. (note filter value is all caps!)
Default is 'ROADMAP'.
(NOTE: This filter cannot be applied to the 'results' widget.) - filter=shapesearch:{lat+lon}
Use the Widget Wizards to generate the latitude and longitude for your shape.NOTE: Map shapes can be defined with up to 25 vertex (click) markers.
- filter=mapzoom:{level}
Choose the zoom level you want for the initial map view. Use the LAC Wizard to create these filter values. Use the "Display Properties With Widgets" wizard. The option to set the mapzoom: and mappos: parameters is on step-3 of the wizard, under the map on the left side. Remember the view of the map does not affect the result, just the view. - filter=mappos:{lat+lon}
Choose the center point you want for the initial map view. Use the Wizard to create these filter values. The option to set the mapzoom: and mappos: parameters can be found on the MLS Criteria selection page in the Map Area tab of the search form. Remember the view of the map does not affect the result, just the view. - filter="tab:gallery"
Show the Grid layout initially when the widget loads instead of the map. - filter="header-menu:false"
This will hide the 'menu' icon and the 'save-search' button in the header. - filter="login-panel:false"
This will hide the entire header above the display.<div id="MBBv3_InteractiveMap" filter="login-panel:false"></div>[mbb_widget id="MBBv3_InteractiveMap" filter="login-panel:false"]
3. Set height with inline style= (optional)
When the map loads, the widget height will be adjusted to fit inside the browser.
The height can be manually set by using in-line CSS styles as part of the widget shortcode.
Setting the height will apply to the widget only when showing the map.
Example:
To set the map container height to be 500px, add style="height:500px;" as as additional parameter inside the widget "div" or WordPress shortcode.
<div id="MBBv3_InteractiveMap" style="height:500px"></div>
[mbb_widget id="InteractiveMap" style="height:500px"]
4. Hide the Sidebar
The Map Display widget layout always includes the sidebar that shows properties. If you wish to hide this for your display, then the current approach will be use this custom CSS with your Widget Theme to hide this element.
.bfg-map-list-container { display: none; }
See Search Filters and How to Use Search Filters for more help on these parameters.
Defaults
By default, the Map Display widget shows up to 5000 properties in your area based upon your MLS Agent ID.