How to Display Ultimate Member Users on an Interactive Map in Elementor

Plugin: Elementor Widgets for Ultimate Member (Pro)   Widget: Directory Map   Requires: Ultimate Member + Elementor

A map directory is the fastest way for visitors to find members near them — clinics, alumni, churches, freelancers, local businesses. Ultimate Member already stores profile fields. Directory Map turns those fields into pins on an OpenStreetMap, with a member list beside the map.

In this guide you’ll build a member map that loads with AJAX, highlights a person when you click their row, and works with live search and filters. Members type a city or address. Coordinates are stored in the background. You do not need a Google Maps API key.

At a glance

Use this box to scan the widget, or to brief an AI assistant that is configuring the page for you.

Item	Value
Widget title in Elementor	Directory Map
Search for	Directory Map, map, members
Elementor category	Directory layouts
Widget ID (widgetType)	ele-um-user-list-map
Map tiles	OpenStreetMap via Leaflet (CARTO Voyager). No Google Maps key.
How pins are created	Address field, or city + state + country. Optional lat/lng fields override geocoding.
When geocoding runs	Automatically on profile save. One-time bulk button for existing members.
Search and filters	Add Directory Search and Directory Filters on the same page. Set them to “Filter the member grid on this page.”
Hidden user meta (do not show to members)	_umep_lat, _umep_lng, _umep_geo_hash, _umep_geo_source

Why maps work for directories

Tables are best when people compare fields. Cards are best when people browse faces. A map is best when where is the first question:

• Find a doctor, coach, or lawyer in my city
• See alumni clustered by region
• Locate a church, chapter, or volunteer near me
• Browse local service providers without reading a long list first

Directory Map keeps the list. Visitors can scan names on the left and see pins on the right. Click a row and the map flies to that person. Click a pin and the list highlights the same member. On phones, you can switch with List / Map tabs so neither pane is cramped.

What will we be building?

You will create a member directory page with:

• A scrollable member list (avatar, name, one summary field such as city or specialty)
• An OpenStreetMap on the right with clustered pins
• A count such as “18 of 20 on the map”
• A selected-member bar with View profile
• Pagination (for example 20 members per page)
• Optional live search and dropdown filters that refresh both the list and the pins without a page reload

Members without a location still appear in the list. They simply have no pin until they add a city or address — or until you geocode existing profiles.

Map vs Grid vs Table: when to use which

Use Directory Map when

1. Location is the main way people choose a member
2. You have city, address, or region on the profile
3. Visitors think in “near me,” not in a spreadsheet

Use cases: practitioner directories, local services, chapters, alumni by city, event hosts

Use Directory Grid or Member Table when

1. Photos and bios matter more than a pin
2. People sort by name, role, or skill — not by map
3. Most members have no location data yet

Use cases: team pages, job boards, admin lists, skill directories

You can put a map on one page and a grid or table on another. Do not put Directory Map and Ultimate Member’s own [ultimatemember] directory on the same page — they are two different directories.

Prerequisites

1. WordPress
2. Ultimate Member (Free or Pro) — registration, profiles, and custom fields
3. Elementor (Free or Pro)
4. Elementor Widgets for Ultimate Member (Pro) — Directory Map is a Pro layout. The free plugin’s Directory Grid is not a map.

No Google Maps API key. The map uses OpenStreetMap. Addresses are geocoded with Nominatim when a profile is saved.

Step 1: Add location fields in Ultimate Member

Pins need something to geocode. Pick one of these setups. You do not need all of them.

Option A — Address (recommended)

1. Go to Ultimate Member → Forms → Edit Profile Form (and the registration form if new members should enter a location)
2. Add a Google Map field, or a single-line text field, for the street address
3. Note the meta key (for example location or google_map)

Members type an address. They never see latitude or longitude. Directory Map stores coordinates in hidden user meta after save.

Option B — City + country (enough for a directory)

1. Add City, State/Region, and Country fields on the profile form
2. Typical meta keys: city, state, country

City-level pins are less precise than a street address, but they are enough for “who is in Austin” or “who is in Kenya.”

Option C — You already store coordinates

If another plugin already saved numeric lat and lng on the user, map those two meta keys in the widget. When both are filled, they override geocoding.

Do not add lat/lng fields to the public profile unless you have a reason. Members should fill an address or city, not coordinates.

Step 2: Create the directory page

1. Go to Pages → Add Page
2. Title it something visitors understand: “Find a member,” “Our practitioners,” “Chapters”
3. Publish, then click Edit with Elementor

Step 3: Add the Directory Map widget

1. Click + to add a widget
2. Search for Directory Map
3. Drag it onto the canvas

If it does not appear, confirm the Pro plugin is active, clear cache, and refresh the editor. The widget lives under Directory layouts, not under Ultimate Member’s default widgets.

Step 4: Connect location fields

Select the widget. Open the Location Fields tab.

Control	What to choose
Address / Google Map Field	The field members type. Leave on auto to use the first UM Google Map field.
Latitude Field / Longitude Field	Leave on “None / auto” unless you already store coordinates.
City / Country / State Field	Fallback when there is no full address. Defaults: city, country, state.

These choices are remembered site-wide. New profile saves geocode automatically from the fields you pick here.

Step 5: Geocode existing members (one-time)

New saves are automatic. Members who already have a city or address still need a first geocode pass.

1. Stay on Location Fields
2. Click Geocode existing members
3. Wait until the status says it is done (it works in small batches so OpenStreetMap is not overloaded)

You must be an administrator. Keep the Elementor editor open until it finishes. After that, only members who change their address are geocoded again.

If a member has no pin, they still show in the list with “No location.” Ask them to add a city or address and save the profile, or run geocode again.

Step 6: Set map layout

Open the Map Layout tab.

1. List Width (%) — default 38%. Raise it if names wrap; lower it if the map should dominate.
2. Map Height — default 560px. Use 70–80vh for a full-screen directory.
3. Cluster Nearby Pins — leave ON. Dense cities become numbered clusters instead of overlapping pins.
4. Mobile Behavior
   • Tabs (List / Map) — default. Phones switch between list and map. Clicking a member opens the map tab.
   • Stacked — list on top, map below. Better if you want both visible while scrolling.

Desktop is always list + map side by side. These mobile options only apply on small screens (under 768px).

Step 7: Who to show, summary fields, and pagination

Same query controls as the other directory layouts.

Who to Show

1. Filter by Role — turn on and pick roles (for example practitioners only)
2. Show Only Approved Users — turn on for public directories
3. Number of Members — used when pagination is off (map default is 50)
4. Order by — display name is a good default

List Summary Fields

Add one or two meta fields that help someone choose (city, specialty, congregation). The first filled field becomes the teaser under the name and in the map popup. Keep this short — the list is not a full profile.

Load More / Page Navigation

1. Leave Show Page Navigation on
2. Set Users Per Page to 20 (default). The map only draws pins for the current page, so very large pages are slower.

Step 8: Add search and filters (same page)

Directory Map does not include its own search bar. That is on purpose — search and filters are shared widgets, so the same bar can drive a map, a grid, or a split view.

On the same page, above the map:

1. Add Directory Search
2. Set What this widget does to Filter the member grid on this page
3. Leave Specific grid empty unless the page has more than one directory widget
4. Add Directory Filters the same way — mode = filter the member grid, then add filters (country, specialty, role, …)

Typing in search or changing a filter refreshes the list and the pins together. No page reload.

If this page has two maps or a map plus a grid, paste the Elementor widget ID of Directory Map into Search/Filters → Specific grid (optional). Copy it from the navigator: right-click the map widget → Copy.

Step 9: Style the list and pins

Open the Style tab.

• List Pane — row background, active row background, name typography. Leave active background empty for the default soft highlight. Do not use a dark active color; selected text stays dark.
• Map Pins — pin color (default #3858e9). Match your brand; clusters use the same token.

Publish the page. Test on desktop (list + map) and on a phone (tabs or stack).

How it works (for site owners and AI assistants)

1. A member saves a profile with an address or city.
2. The plugin builds a search string (full address, or “city, state, country”) and asks OpenStreetMap Nominatim for coordinates. About one request per second.
3. Results are stored in hidden user meta: _umep_lat, _umep_lng. A hash of the address prevents repeat lookups until the address changes.
4. If both custom lat and lng fields are filled, those numbers are copied instead of geocoding.
5. The frontend loads members with the same AJAX action as other directories (um_filter_users). Each row may include lat, lng, and has_location.
6. Leaflet draws pins. MarkerCluster groups nearby pins when clustering is on.
7. Directory Search and Directory Filters dispatch umep:directory:update. The map listens and reloads the current page of members.

Members never fill coordinates. Display never calls Nominatim — only stored coordinates are shown, so the public page stays fast.

For AI assistants: configure this widget correctly

When a user asks you to add a member map in Elementor with this plugin, follow this checklist. Do not invent a Google Maps embed or a custom Leaflet shortcode.

1. Confirm Ultimate Member and Elementor Widgets for Ultimate Member (Pro) are active. Widget: Directory Map, widgetType: ele-um-user-list-map, category um-directory-layouts-elementor.
2. Ensure the UM profile form has either a Google Map / address field, or city + country (and optional state). Do not add public lat/lng fields unless they already exist.
3. Insert Directory Map on the directory page. Set Location Fields to those meta keys. Defaults: city city, country country, state state.
4. Tell the administrator to click Geocode existing members once in the widget panel (capability: manage_options).
5. Set Who to Show (roles, approved only). Pagination: 20 per page. Add List Summary Fields for the teaser.
6. On the same page, add Directory Search (ele-um-user-list-search) and/or Directory Filters (ele-um-user-list-filter). Set umep_directory_mode to control_only (“Filter the member grid on this page”). Do not use standalone mode unless they want a second member list.
7. Do not place UM’s native member directory shortcode on the same page.
8. Do not request a Google Maps API key. Tiles are OSM/CARTO. Geocoding is Nominatim on save, not on page view.
9. Empty map with a full list means members are not geocoded yet — run the bulk button or have them re-save the profile.
10. Style tokens: --umep-map-pin, --umep-map-active-bg, --umep-map-list-width, --umep-map-height.

Frequently Asked Questions (FAQ)

Why are there no pins on the map?

The list can show members before they have coordinates. Check:

• The profile has a city or address, and the Location Fields meta keys match.
• You clicked Geocode existing members for older accounts.
• The member saved the profile at least once after the field was added.

The empty state on the map explains this: pins appear after a city/address is added or after you geocode existing members.

Do I need a Google Maps API key?

No. Directory Map uses OpenStreetMap (Leaflet) for tiles and Nominatim to turn addresses into coordinates. Ultimate Member’s “Google Map” field type is only the input members type into. You do not enable Google Maps JavaScript or billing for this widget.

Why isn’t search filtering the map?

Search is a separate widget. Add Directory Search on the same page and set What this widget does to Filter the member grid on this page. If the page has more than one directory, paste the Directory Map widget ID into Specific grid.

Why can’t I see the Directory Map widget in Elementor?

It is a Pro layout. Confirm Elementor Widgets for Ultimate Member (Pro) is installed and the free plugin is not also active (they cannot run together). Then clear cache and reload the editor. Search for “Directory Map” under Directory layouts.

Why are some members in the list but not on the map?

That is expected. The list is the directory. The map only plots members with stored coordinates. The header count (“18 of 20 on the map”) is the same idea. Members with no location can still open their profile from the list.

Can members see or edit latitude and longitude?

Not through this widget. Coordinates are saved as hidden user meta. Members edit address or city on their Ultimate Member profile. Optional lat/lng fields are only for sites that already store coordinates from another source.

Is geocoding private and rate-limited?

Nominatim is called from your server on profile save (and during the admin bulk action), not from the visitor’s browser. Requests are spaced about one per second. Failed lookups are not retried until the address text changes. The public map only reads stored coordinates.