Add Users on Map in WordPress – Tutorial

Projects where you need to add users on map in WordPress can require more time for development as you need to deal with more then just a Google Maps embed with some POI’s on it. While it’s not really a technical problem, the extra time can eat into the existing budget for the project or even increase it.

WordPress map plugins are one thing, but to add users on map in WordPress requires a different setup than a simple embed:

• you need the possibility for users to have their own profile and add the location themselves
• once users can place POI’s on the map you need to list all the users
• searching for users, or filtering them based on various information extends the functionality of your map

There are many member directory WordPress plugins, but for this step by step tutorial we’ll use the Map field in the Profile Builder Pro plugin, then list the users using the User Listing Module. This way, you’ll get more than just a Google Maps widget in your site’s sidebar.

Allow users to select a POI on the map

For this to work correctly, each users needs to be able to select his own POI that will be displayed on the map. The information inside the POI needs to be tied to his own profile, like the avatar, first and last name, etc.

We start by adding the Map field in the Profile Builder Pro plugin’s options by going to Profile Builder -> Form Fields.

Since this is a Google Maps implementation, we’ll need an API key for your WordPress site. You can learn how to generate one via the documentation page.

For this api key, we need to enable two Google API’s:

• • the Google Maps Javascript API – needed for the actual custom Google map
  • the Google Maps Places API – needed for the search bar inside the map so users can search for their address i.e. have an interactive map

These APIs are paid, so make sure you check the Google Maps Console for updated pricing before moving forward.

While there isn’t much else needed beside the API key to get this working, we’ll also setup the settings:

• • • “POI’s Load Type: POIs of all the users for the filter* (no pagination)”
    • add a few extra info to the “POI Bubble Info”.

Now we can visit our registration form generated by the Profile Builder plugin and see the map selection. A similar map will appear on the edit profile form so users can easily change their address if needed. Users can also toggle it to see the street view and adjust the zoom level.

Add Users on Map in WordPress

Listing all the users on the map can be achieved using with the User Listing module in the Profile Builder Pro plugin.

• • • Profile Builder -> User Listing -> All UserListing Template -> Extra Functions use the {{{users_one_map}}} tag to create a map with all the points. This particular tag only works with the All User Listing Template.
    • Profile Builder -> User Listing -> Single UserListing Template -> User Fields Tag. Will have a unique name based on the metaname you created in the Form Fields.

With the settings we mentioned in the Form Fields for our Map field, using the {{{users_one_map}}} will now load all the POI’s users added to the embed. No need to use shortcodes!

For a small number of POI’s (300) they will load instantly, for the rest, they will load asynchronously so we don’t run into performance issues when there are a lot more users.

Filtering users on map in WordPress

Moving a step forward, we can also filter the user POI’s based on the faceted filters defined for this particular user listing.

You can filter users based on any information defined in other form fields like:

• • • name
    • age
    • sex
    • company
    • favorite color
    • etc.

Applying any of the filters, will list all the users that meet that criteria.

Check out this short video (~2 min and no sound) on how this feature works. Make sure to make it full screen in order to see the settings and setup better.

Conclusions

If you have a project where you need to add users on map in WordPress, this is now possible with the Profile Builder Pro plugin. Not only you can list all the users on the map, you can also filter them, search for individual users, making this functionality even more useful. The best part is that you can do this using the WordPress plugin’s built-in options – no need to use a shortcode or HTML/CSS.

If you have suggestions or feedback regarding the add users on map feature in the Profile Builder Pro plugin, feel free to let us know in the comments below!

And keep on building WordPress websites!