Member Directory with User Locations map

This article describes how to configure and use the Google Map and User Location filter in the Member Directory.

Related articles: Member Directories 2.1.0+, User Locations Setup

Versions: Ultimate Member since 2.6.8, Ultimate Member - User Locations since 1.1.0.

Contents

• Adding Map to the Member Directory
  • Settings
  • Focus the map on certain region or country
• A map in the Member Directory
  • Examples
  • Pagination
  • Results Text
• For developers
  • Marker Clustering
  • Map height
  • Hide a map

Adding Map to the Member Directory #

You can add a map to the member directory and show members' locations with markers on the map. The map may be used to filter searching results and display only those members whose location match certain criteria - map bounds or distance.

Settings #

A box "User Location" appears in the member directory settings once the extension User Locations is activated and Google Maps API key is successfully entered in the extension's settings.

The directory User Location settings:

• Show nearest users when search results are empty - Enable this feature if you want to autofocus the map to the nearest member if there are no members whose location matches the current map.
• Show Map - Turn on to display the map in the directory.
• Show this user location field at the map - Select the User Location field that is used to display markers on the map and filter members by their location.
• Map height - Set a map height on a screen. The size is set in pixels.
• Starting map zoom level - Set the default map zoom. From 0 to 12.
• Starting address latitude - Set the default latitude of the map center. From -90 to 90.
• Starting address longitude - Set the default longitude of the map center. From -180 to 180.
• Enable user location search field - Enable user location filter for searching in directory.
  • Choose a type of searching - Select an algorithm of location filter: Search by visible bounds or Search by radius.
    • Nearby members searching radius - Set the distance. Optional, appears if the Choose a type of searching is set to Search by radius.
    • Distance unit of measurement - Select the unit of the radius. Optional, appears if the Choose a type of searching is set to Search by radius.
• Choose field(s) to display in marker's infowindow - Select information that is shown in the marker's info window.
• Marker type - Select markers' type: Avatar marker, User role marker or Classic Google marker.

Image - The directory "User Location" settings

Focus the map on certain region or country #

Table - Recommended values to focus the map on certain region or country on mobile

A map in the Member Directory #

Examples #

This is a map on a member directory for showing users locations.

This is a map on a member directory for showing users locations and filtering users by the visible map's bounds.

Pagination #

The member directory is divided into pages. The map displays markers for members who are in the current page. List pages using links under profile cards to see the next group of members and map markers that match their locations.

You can change a number of profiles displayed per page. Use settings Number of profiles per page and Number of profiles per page (for Mobiles & Tablets) in the box "Results & Pagination".

Image - The directory "Results & Pagination" settings (per page)

Results Text #

We recommend changing settings Results Text and Single Result Text if you enable filtering by user location. Customers may not understand that the map influences searching.

Image - The directory "Results & Pagination" settings (Results Text)

Image - Results Text in the directory with active user location filter.

For developers #

Marker Clustering #

Google Maps can combine markers of close proximity into clusters, and simplify the display of markers on the map. You can use um_member_directory_disable_clustering hook to disable this feature. See code example in the article User Locations - Hooks.

Map height #

You can use custom CSS code to change the map height. See code example in the article Make the directory map height responsive.

Hide a map #

You can use custom CSS code to hide the map in the directory if you need a location search field but don't want to display a map.

/* Hide (make invisible) a map in the directory */
.um-member-directory-map {
	position: absolute;
	visibility: hidden;
	z-index: -1;
}