Home / , / Widget – Map with Properties or Contact

Widget – Map with Properties or Contact

4495 views

Map with Listings or Contact Details – how it works in WPResidence

The Map with Listings or Contact Details feature allows you to display a map in two different modes: property listings or contact / office location. The behavior depends on where the map is used and how it is configured.

Map mode – Listings or Contact

Inside Elementor or the shortcode settings, the first option is: Map With Listings or contact with Office location pin?

  • Listings – the map shows property markers based on filters
  • Contact – the map shows a single office location pin with contact details

This selection controls what data the map loads.

Using the map with Listings mode

When Listings is selected:

  • The map displays property markers
  • Markers are loaded dynamically via JavaScript
  • Optional filters can be applied

You can filter the listings shown on the map using:

  • Property categories
  • Property actions
  • Cities
  • Areas
  • Counties / States
  • Property status

Using the map in Contact mode

When Contact is selected:

  • The map displays a single pin
  • The pin location is taken from the Contact Page settings
  • Optional contact details can be displayed over the map

All contact information used by the map is configured globally from:

Theme Options → Social & Contact → Contact Page Details

This includes:

  • Company name
  • Email
  • Phone number
  • Office address
  • Opening hours

The map widget does not define contact data itself. It only reads what is already set in Theme Options.

Hero Media Header with Maps

When using the map as a header:

Theme Options → Header → Hero Media Header

  • Set Global Hero Media Header Type = Maps
  • The map becomes the first section below the header

Elementor editor behavior

When editing a page in Elementor:

  • The map may show a loading indicator
  • JavaScript map data is fully rendered only on the frontend

This is expected behavior. Always preview the page on the frontend to validate the map.

Where this map can be used

  • Inside a page using the Map shortcode, only when Hero Media is set to something other than Maps
  • Inside Elementor using the Map with Listings or Contact Details widget, only when the map is not already used as Hero Media

The map cannot be loaded twice on the same page. When the map is used as Hero Media, it must not be added again via shortcode or Elementor on the same page.

The Map shortcode and the Elementor map widget are intended for cases where the client wants to display the map in a different position than the hero area, for example inside page content, a section, or below other elements.

Common issues and checks

  • Confirm Maps API keys are set correctly
  • Clear cache after changing map or contact settings
  • Do not rely on Elementor preview for map data validation
  • Ensure Contact Page Details are filled when using Contact mode

If the map appears empty or stuck loading, test on the frontend first and clear all caches before further troubleshooting.