Add Users on Map in WordPress – Tutorial

add users on map in WordPress

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 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:

  • 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 plugins, but for this tutorial we’ll use the Map field in Profile Builder Pro, then list the users using the User Listing Module.

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 Profile Builder -> Form Fields.

Since this is a Google Maps implementation, we’ll need an API key. 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 map
    • the Google Maps Places API – needed for the search bar inside the map so users can search for their address

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 Profile Builder and see the map selection. A similar map will appear on the edit profile form so users can easily change their address if needed.

add users on map with WordPress

Add Users on Map in WordPress

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

      • 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.

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 Profile Builder Pro. 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.

If you have suggestions or feedback regarding the add users on map feature, feel free to let us know in the comments bellow!

And keep on building WordPress sites!

Subscribe to get early access

to new plugins, discounts and brief updates about what's new with Cozmoslabs!

2 thoughts on “Add Users on Map in WordPress – Tutorial

  1. Nice work.
    That’s what I did inside my site gig-jockey.com
    suggestions as options area:
    1: add this as a shortcode so you can add this anyywhere on the site.
    2: make the pin as avatar or SVG upload
    3: infobox – colors options
    that’s it for now 🙂

    1. Thanks Igor, these are all valid suggestions.

      No 1. can already be achieved, the User Listing is basically rendered via a shortcode.

      If users repeatedly request them we’ll definitely implement them.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.