User Locations Setup

Overview

This document provides instructions on how to configure the display of location fields in the user profile and map in the member directories using the extension User Location.

Contents

Installing #

You can download the extension via your account on our website. If you have made an individual extension purchase, you can download the extension via the download tab on your account page, or if you have purchased the pass, you can download the extensions via the downloads page. Once the extension is downloaded, you should install and activate it using the WordPress plugin installer on wp-admin > Plugins. You can read the article Installing an Extension for details.

Google Maps API keys #

After you have activated the plugin, you will be redirected to the installed plugins page, where you should see the following notice.

For the User Location extension to work on your site, you need to generate a Google Maps API key. If you already have the key, you can skip the next section. If you do not already have your Google Maps API key, click the " Generate your API key" button, and you will be taken to the official Google Maps API website.

Generating your Google Maps API key #

Google Maps JavaScript API is a part of Google Maps Platform in Google Cloud Platform, so you need to be registered at Google Cloud Platform. 

If you are a new user, click the Get Started button and go through the registration process. For the User Location extension to work correctly, you need to use these APIs:

  • Maps
  • Places
  • Geocoding

You can enable needed APIs and get your API key, as shown in the screenshots below.

If you have already enabled the Maps JavaScript API, you can copy the key by clicking the SHOW KEY link in the API keys table on the Credentials page.

For the user location plugin to work, you must enable the 3 APIs in the Google Maps Console: 

  1. Maps Javascript API
  2. Places API
  3. Geocoding API

Go to Google cloud console>select project>Navigation Menu>APIs & Services> Enabled APIs & services.

It will take you to the APIs & services page, click the "+ ENABLE APIS AND SERVICES" link or the Library from the side menu, and this will redirect you to API Library

Click the "VIEW ALL" link in the Maps section to see all Maps API.

Click on each of the following APIs below. In each API, click the "ENABLE" button. You'll know that the API is enabled when a green circle with a check appears with the message "API Enabled," and the blue button is now "MANAGE."

  1. Maps Javascript API 
  2. Places API 
  3. Geocoding API

Note: Read the article How to create a Google Maps API key for details.

Settings page #

Once you have your API key go to the  wp-admin > Ultimate Member > Setting > Extensions > User Location section, enter your API key to the setting Google Maps Javascript API Key, and click the Save Changes button.

Once you have successfully entered the correct key, the Google Map can be added to forms (Registration/Profile) or Member Directories. Please note that Google Maps will only show once you enter the API key. If you enter the wrong key, you will see an error appear on the forms or member directories where Google Maps should be.

Settings below are the key used to customize the map view. These settings will be applied for User Location fields in forms:

  • Map height - Set map height in px. Default 400.
  • Starting map zoom level - Pick a starting zoom level for the map. From 0 to 12.
  • Starting address latitude - Pick a starting position for the map. From -90 to 90.
  • Starting address longitude - Pick a starting position for the map. From -180 to 180.

Adding User Location fields to the form #

You could create 1 or more custom fields with the User Location type. You will see the standard dialog of the custom field's creation process. 

Note: The field meta key you specify is the base prefix. Real data are stored in "{metakey}_lat", "{metakey}_lng", "{metakey}_url" usermeta.

Image - The  User Location button in the form Fields Manager.

There is a User Location field's layout. You can use Google's autocomplete to find the necessary location or just put a marker on the map.

Image - An example of the  User Location field view in the form.

Adding Map to the Member Directory #

You could add a map to the member directories and show the markers of one of the created custom fields with "User Location" type. Once you have successfully entered the correct key the Google Map you will be able to see member directory meta box with the settings below.

The directory User Location settings:

  • Show nearest users when search results are empty - The feature that focuses a map if nobody is found (optional).
  • Show Map - Turn it on to display a map.
  • Show this user location field at the map - This option is used to select user location markers that will be displayed on the map.
  • Map height - This option is used to customize a map height on a screen. The size is set in pixels.
  • Starting map zoom level - This option is used to select the default map zoom.
  • Starting address latitude - This option is used to select the default latitude of the map center.
  • Starting address longitude - This option is used to select the default longitude of the map center.
  • Enable user location search field - This option is used to enable additional search field.
  • Choose field(s) to display in marker's infowindow - This option allows you to select what information will be shown  in the marker's info window.
  • Marker type - Selects a type of markers for found members.

Image - The map settings on  wp-admin > Ultimate Member > Member Directories > Edit Member Directory.

The map on the members page displays markers for found members. Found members are divided into pages. You can list pages using links under the results. The map displays markers for members who are in the current page only.

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.

Related Articles