The Open Street Map widget lets you display property listings on an interactive map powered by OpenStreetMap. It's a free and open-source alternative to Google Maps or Mapbox and is useful when you want to avoid API-related costs or restrictions. This widget helps users visually explore properties by location with filtering options.
How to Add the "Open Street Map" Widget
- Open the page in Elementor where you want to add the map.
- In the Elementor widget panel, search for "Open Street Map".
- Drag and drop the widget onto the desired section of your page.
- The map will appear, and you can configure its settings from the Content and Style tabs.
Configuration Options
Content Tab
Map Options
- Default Zoom: Set the initial zoom level when the map loads (default: 12).
- Hide Zoom Control: Toggle to show or hide the zoom in/out buttons.
- Hide Next/Previous Control: Toggle to show or hide navigation arrows.
- Map Height (px): Define the vertical height of the map in pixels (default: 600px).
Properties Filters
- Number of Properties: Choose how many properties to display on the map.
- Offset: Skip a number of properties before displaying results.
- Type: Filter properties by type (e.g., apartment, villa, office).
- Status: Filter by property status (e.g., for sale, for rent).
- Features: Select property features to display only listings that match.
- Labels: Apply labels like "Hot Offer" or "Featured".
- Country, State, City, Area: Restrict displayed properties to a specific geographic location.
- Featured Properties: Toggle to display only featured properties.
Best Practices
- Use this widget when you want a lightweight, cost-free mapping solution.
- Combine with property filters for better usability and targeted search.
- Keep the Map Height consistent across your site for a professional look.
- Ensure properties are geocoded correctly to display in the right location.
Notes
- The Open Street Map widget does not require a paid API key, unlike Google Maps or Mapbox.
Comments
1 comment
Hi Guys, if u want to change the zoom with scrollwheel on OpenStreet maps go to wp-content/themes/houzez/js/osm-properties.js and comment go to the line 411 and 428 and comment them out. After that u will be able to use scoll wheel as zoom on map.
PS: Support told us that this feature is not available and we should hire a developer....
You are welcome.
Please sign in to leave a comment.