A Cozmoslabs Product

Map Field

This Extra Field Type is available in Profile Builder Basic, Pro, or Agency.

You can use this extra field type to allow users to pin their location and then list all the users on a map.

You can specify the field title, meta-name to be stored in the database, description, Google Maps Api Key, default latitude, default longitude, default zoom level, map height, POIs Load Type, POI bubble info and default number of users per map.
Also, you can set whether this field should be required or not.

This is how it looks like in the front-end.

Profile Builder - Map Field Front End

How to create your Google Maps API Key

Before you start, please be aware that extra charges might be needed depending on the type of the API that you want or per MAP Load!  For further informations, check out this document.

First you will need to login into your Google account and then access Google Developers Console. Here you will be able to Register your application for Google Maps JavaScript API. To enable Google Maps JavaScript API we have to search for “Maps JavaScript API” in the search bar and then we need to click on the “Enable” button.

Also, you need to enable Places API. The Places API is needed for searching of addresses and locations in your map.

Now the API is enabled for our project. We have to create credentials so we will click on “API key”.

We can give our API Key a Name like Google Map API Key. At Application restrictions we need to choose HTTP referrers (websites). Also, we can add multiple HTTP referrers so that we can limit map loading only for these URLs.

Our API Key is now Created. Copy and Paste it in Profile Builder -> Form Fields -> Map Field -> Google Maps API Key. To finish the process and go to API Manager click on “Done”.

Enable billing for Google Maps

After setting up the map field, this message might show up:

Profile Builder - Map Field - Map Error

Followed by this error in the Console:

Profile Builder - Map Field - Map Error Console

This means that you need to enable the Billing on your Google Cloud Project. This can be achieved by clicking on this link.

Integration with User Listing

In order for the map to be actually useful, you can list all users on a single map, inside User Listing.

The map on the All Userlisting Template works with the faceted filters and custom shortcode arguments from User Listing.

The Ultimate Membership Bundle

Combine the power of Profile Builder with Paid Member Subscriptions to set up user registration, memberships, and recurring revenue.

Get 25% off with the bundle

Help & Support

We’re here to help you every step of the way.

Open a Support Ticket