The Map Display widget displays properties on an interactive map. A Search Filter can be applied to specify the properties to be shown. Don't forget to get your Google Maps API key. 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.

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 use the slider bars and 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
v3-map-widget

This widget is mobile responsive and will expand to fill any container / space made available in your website page design. Widget Themes can be used to apply predefined, or your own, color schemes. Minimum width: Designed for mobile. Maximum width: Unlimited.

Using the Map

Its important to notes that the 'visible area' on the map IS NOT part of the search method. The map is a VIEWING method only. In other words, the criteria specified in the top section or passed to the map (including any defined shape) will determine the number of properties 'Found' and shown on the map. PAN and ZOOM functions simply change what is viewed. When the 'Found' result is less than or equal to 200 properties, a sidebar of properties will also be shown automatically as shown below:

Limitations

  1. A page can only have one Map widget
  2. The Map Widget cannot be combined on a page with the Results widget
  3. 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.
  4. 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
For example:

<div id="MBBv3_InteractiveMap"></div>

[mbb_widget id="MBBv3_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 areas / 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.
    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="login-panel:false
    Hide the "My Account" Options (login etc) bar.
    The horizontal bar below the Map Widget displays the My Account login panel with links for "Searches and Alerts, Favorite Properties, Recent Properties, Register, Login" This bar is presented by default. If you wish, you can hide this using this filter option.
    <div id="MBBv3_InteractiveMap" filter="login-panel:false"></div>

    [mbb_widget id="MBBv3_InteractiveMap" filter="login-panel:false"]

3. 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.

See Search Filters and How to Use Search Filters for more help on these parameters.

Examples

Defaults

By default, the Map Display widget shows up to 5000 properties in your area based upon your MLS Agent ID.

Additional Technical Notes

Hiding and showing the Map using 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 So - 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();

Admin