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:
– 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:
- Reach the API Google Dashboard: https://console.developers.google.com/apis/
- Create a new Project (the name does not matter):
- Find the 2 APIs that must be enabled from the APIs library:
- Enable each API:
- Get a key:
- 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.
Google MAP Geocoding API:
- Open a new tab in your favorite browser and reach: https://maps.google.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=false&key=KEY. Do not forget to replace KEY at the end with your Geocoding API key. You can find details on them on the official documentation.