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.

You can add a map to the member directory to 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.

Contents

User Location #

The User Location section appears in the member directory settings once the extension User Locations is activated and Google Maps API key is entered in the extension settings.

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

Display a map #

Turn on the Show Map setting to display a map in the member directory. Configure the map center, size and zoom using these settings: Map height, Starting map zoom level, Starting address latitude, Starting address longitude.

Recommended values to focus the map on certain region or country:

Region or country Map height Starting map zoom level Starting address latitude Starting address longitude
Europe 350 3 51 15
USA 300 3 39 -96
Japan 300 4 39 135
China 330 3 38 106
India 370 4 22 83
Brazil 330 3 -12 -53
South Africa 280 4 -27 25
Australia 320 3 -24 135

Marker type #

Use the Marker type setting to choose the marker type to display users location on the map.

  • Avatar marker - Displays a marker on the map using the user's avatar image.
  • User Roles marker - Displays a marker on the map using a custom icon associated with the user's role.
  • Classic Google marker - Displays a standard Google Maps marker on the map.

Turn on the Enable user location search field setting to search or filter users by their location. The location search line is displayed below the map in the directory if this feature is enabled. In this line you can type the address and select a place. Once the place is selected the map center moves to the desired place.

Once the user location search is enabled you'll see the Choose a type of searching setting below. Use this setting to choose a searching tool you prefer.

  • Search by visible bounds - This tool excludes members if their location is out of the current map bounds. Move the map or zoom it to display members in the desired location.
  • Search by radius - This tool excludes members if a distance between their location and the map center is greater than a specified searching radius. You'll see additional settings if this tool is chosen:
    • Nearby members searching radius - Set a distance from the target location for getting nearby members.
    • Distance unit of measurement - Set a unit to measure a distance.

Sorting #

The extension adds the Distance sorting option. You can select this option in the Default sort users by setting if you wish to display closest members first. Note that this sorting feature is slow.

Results & Pagination #

Pagination #

Found members are divided into pages.  The map displays markers for members who are in the current page only. Switch a directory page using links in the pagination area to see other members.

You can change the number of profiles displayed per page using settings Number of profiles per page and Number of profiles per page (for Mobiles & Tablets) if you wish to display more markers on the map. Note that this may slow a directory.

Results Text #

The directory displays a number of found members above the profile cards area. We recommend changing settings Results Text and Single Result Text to help customers understand that the map influences searching.

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;
}

Related Articles