In order to use the advanced Google Maps features on a UXi site, two separate API keys need to be created on the Google APIs Manager, then added to the UXi Map Styles dashboard.
These advanced features include any use of the following:
- UXi Locations add-on
- Locations Finder widget
- Locations Map widget
- Custom map styles from the Map Styles dashboard
There are two requirements for the Google account:
- The account must have access to the Google Developers Console service.
- The account must be linked to a billing account.
Enabling the Google Developer's Console
1. From the Admin console Home page, go to Apps > Additional Google Services, then enable the Google Developer's Console.
Creating New Projects
3. From there, click Get Started in the top right corner.
Pick a Product
4. On the following screen, you’ll be asked to select which APIs to use. Pick Products Maps and Places. Then click Continue.
Select a Project
5. Next, it’s time to select a Project.
- If you’re starting a new project, enter a project name here. Its best to use a name that includes the name of the website, like Bill’s Billiards UXi Website or something similar.
- If you’ve already created a project and you’d like to include this key in it, select it from the dropdown list and proceed to step x below.
6. Once the project is selected, click Next
7. If prompted, agree to Terms & Conditions.
Select Billing for a New Product
8. In this step, you’ll need to set a billing account to link to the API project. When you enable billing, you get $200 free usage every month for Maps and Places API usage. Based on the millions of users using their APIs today, most of them can continue to use Google Maps Platform for free with this credit.
- When you create a new project, you're prompted to choose which of your billing accounts you want to link to the project. If you have only one billing account, that account is automatically linked to your project.
- If you don't have a billing account, you must create one and enable billing for your project before you can use many Google Cloud Platform features. To create a new billing account and enable billing for your project, follow the instructions in Create a new billing account.
- For more information on billing, check out the following links
Enable Your APIs
9. Once billing information has been added, Enable the APIs by clicking +Enable APIs and Services near the top of the page.
10. Here, you’ll most likely see a message like “This will enable 14 Google Maps Platform API(s) and create an API key for your implementation.” There are 14 separate APIs included in the Maps and Places that were selected in the ‘Pick a Product’ step above.
12. At this point, you’ll be shown one of your new API keys. Click Done from the bottom of the pop-up window to proceed to the next step. No need to copy the key just yet.
13. Next, click Secure Credentials at the top right of the screen.
14. Name API Key. To keep things clear, name this one UXi Maps JS API Key.
15. In the Key restrictions section, click the HTTP referrers (web sites) option, then enter the full URL of your site.
- Keep the following in mind as you add your URLs
- Include https://www. at the beginning of the URL.
- Include a forward slash and an asterisk at the end. Adding this allows the API to be used from any page on the site
- EX: https://www.billsbilliards.com/*
16. Click Save.
The first of your new API keys is complete!
Create a Second API Key for Geocoding
17. Click the navigation menu at the top left of the dashboard, and navigate to APIs & Services > Credentials.
18. Click Create Credentials > API Key form the small blue dropdown near the top of the dashboard.
19. The newly created key will display in the pop-up window. Click Restrict Key to complete the set-up
20. Name API Key. Use UXi Website Geocoding API Key.
Important: Unlike the first key, his key does not need any restrictions. Do not add any HTTP restrictions or API restrictions.
21. Click Save.
22. Now that both keys are created, add them to the UXi site by navigating to UXi Settings > Map Styles. Paste each key in its respective field, and click Save in the top right corner of the dashboard.
If you’ve already created a project and API key for your UXi website, update it using the following process:
1. Select Project from top dropdown menu.
2. Click the navigation menu at the top left of the dashboard, and navigate to APIs & Services > Credentials.
3. Click Create Credentials > API Key from the blue button near the top of the screen.
4. From the pop-up, click Close.
5. Click on the newly created key, then name the API Key. Use something here that explains that the key is used for geocoding on the website, like UXi Website Geocoding API Key. No Application restrictions are needed for this key.
6. Click Save.
7. Click Library from left menu.
8. Search for "Geocoding API".
9. Click Enable.
Enable Billing for an Existing Product
10. Go to the Google Cloud Platform Console.
11. From the projects list, select the project to re-enable billing for.
12. Open the console left side menu and select Billing .
13. Click Link a billing account.
14. Click Set account.
Adding API Keys to the UXi Map Styles Dashboard
Now it’s time to enter the newly created key to the UXi site. Log-in to the UXi dashboard and add it by navigating to UXi Settings > Map Styles. Paste the new key in the Google Geocoding API Key field, and click Save in the top right corner of the dashboard.