Map Display Options

Houzez offers multiple ways to display maps across your website, allowing you to integrate Google Maps, Mapbox, or OpenStreetMap depending on your preferences. This flexibility helps you showcase properties effectively and enhance user navigation.

Below are the main methods you can use to add or configure maps in different sections of your website:

1. Page Header Map

When you create a new page (e.g., from Pages > Add New), you can assign a full-width property map to appear as the header of the page. This is configured via the Page Header Options panel.

Options include:

• Header Type: Select "Properties Map" to display a map in the header.
• Full Screen: Enable this option to stretch the map to fit the screen size.
• Select City: Choose one or multiple cities to filter the properties shown on the header map. If no city is selected, all available listings will be shown.

Note: This feature is also available for listing template pages.

2. Display The Map Usign Elementor Widgets

You can use Elementor page builder to add different map blocks directly into your pages. Houzez includes a range of map widgets, each tailored to display properties or agents in different formats.

Available Widgets:

• Google Maps
• Properties Google Map
• Properties Mapbox
• Properties Open Street Map
• Section Google Map
• Section Open Street Map
• Section Map
• Agent Location Map
• Agency Location Map

These widgets can be dragged into any section of your page and configured visually via Elementor's sidebar settings.

Tips

• Make sure to set up your Google Maps API key or Mapbox API key under Theme Options > Map Settings.
• Customize map styles and clustering behavior in the Map Style and Cluster Settings tabs.

With these methods, you can create dynamic, informative pages that make it easy for users to explore listings by location.