1. Home
  2. Eonet Theme
  3. Community
  4. Members Map

Members Map

Connecting to the Google APIs

The first thing we must do in order to use the Map directory is to create a new Google Project. This project will be used to make API calls from your site to Google’s server. We use two APIs from Google to accomplish this feature:

API Name Google MAP JavaScript API Google MAP Geocoding API
Purpose  It turns Javascript code into a Google Map Using the API.
– Mainly all the maps rendered in the frontend and client side.
 It turns addresses into GPS coordinates using Google API.
– It is not used within the map, only when the user edit his profile .

 

The goal is to get a key to connect to the API, you can use one key for both APIs or one key per API. It does not make any difference.

Here is how we get our key:

  1. Reach the API Google Dashboard: https://console.developers.google.com/apis/
  2. Create a new Project (the name does not matter): 
  3. Find the 2 APIs that must be enabled from the APIs library: 
  4. Enable each API: 
  5. Get a key:
  6. When clicking this button, select “API key“, you’ll now find your key:

 

You need to use this key in the Eonet Theme Settings > Community > Map Directory tab, see next part.

Displaying the Map

You can customize your map through the Theme Settings:

Once you map setup, you can display it in any page using the layout option:

Your members will find a Location field in their BuddyPress profile to set their own location. The map positions are refreshed on every profile edit.

Troubleshooting

Google MAP Javascript API:

Google MAP Geocoding API: