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 and specify the 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.
Size
- 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 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="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)
Include in-line CSS styles. For example you may want to set the map container height to be 500px - so inside the DIV or shortcode, add style="height:500px;" as as additional parameter.
NOTE: Setting height applies to just the map portion of the widget, the true height of the widget will be much higher with the top and bottom controls.
NOTE: The Map Display 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 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.
Additional Technical Notes
Adding Widgets to Tabs?
Google Maps API needs the container to be defined otherwise it fails to load and display correctly. So, if you place the Map Widget in a hidden tab, then this means no container is typically defined when the page loads.
To overcome this you need to force the container when the tab is viewed. The following JavaScript should be executed when the tab is clicked to resolve the issue.
mbbQuery(".bfg-interactive-map").data("interactiveMap").refreshMap();
mbbQuery(".bfg-interactive-map").data("interactiveMap").centerMap();