Contents
This Extra Field Type is available in Profile Builder 2.0, Hobbyist or Pro.
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.
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.
We will select to Create a new project and click on Continue.
Now the API is enabled for our project. We have to create credentials so we will click on “Go to credentials”.
We will select Google Maps JavaScript API that will be called from a Web browser (Javascript). We need to click on “What credentials do I need?” to continue.
We can give our API Key a Name like Google Map API Key. Also, we can add multiple HTTP referrers so that we can limit map loading only for these URLs. If you wish to allow an entire domain to load the Google Maps you can add an asterix at the end of the URL.
http://www.yourdomain.com/*
If we don’t add a HTTP referrer, requests will be accepted from any referrer (domain). To continue we have to click on “Create API key”
Our API Key is now Created. Copy and Paste it in Profile Builder -> Manage Fields -> Map Field -> Google Maps API Key. To finish the process and go to API Manager click on “Done”.
Enable Google Maps JavaScript API and Places API
To enable Google Maps JavaScript API we have to go to Google APIs -> API Manager -> Overview -> And click on Google Maps JavaScript API.
Enable Google Maps Places API
The Places API is needed for searching of addresses and locations in your map.
Enable billing for Google Maps
After setting up the map field, this message might show up:
Followed by this error in the Console:
This means that you need to enable the Billing on your Google Cloud Project. This can be achieved by clicking on this link:
https://console.cloud.google.com/projectselector2/billing/enable
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.
- Profile Builder -> Form Fields setup your map field with “POIs Load Type: POIs of all the users for the filter* (no pagination)”
- 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 Form Fields.
The map on the All Userlisting Template works with the faceted filters and custom shortcode arguments from User Listing.