In order to use 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


To avoid usage and billing issues with Google's API, this process should be completed using a Gmail or Google Apps account belonging to the client.


There are two requirements for the Google account:

  1. The account must have access to the Google Developers Console service.
  2. The account must be linked to a billing account.



Enabling the Google Developer's Console

From the Admin console Home page, go to Apps > Additional Google Services, then enable the Google Developer's Console.



Creating New Projects

Visit https://developers.google.com/maps/documentation/javascript/get-api-key.

From there, click Get Started in the top right corner.

Pick a Product

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

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.

Once the project is selected, click Next

If prompted, agree to Terms & Conditions.


Enable Billing for a New Project

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

https://cloud.google.com/maps-platform/user-guide/pricing-changes/#billing-changes

https://cloud.google.com/maps-platform/pricing/#frequently-asked-questions

https://mapsplatformtransition.withgoogle.com/calculator


Enable your APIs

Once billing information has been added, Enable the APIs!

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.

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.

Next, click Secure Credentials at the top right of the screen.

Name API Key. Use something here that explains that the key is used for displaying maps on the website, like UXi Website Maps API Key

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://billsbilliards.com/*

Click Save.

The first of your new Maps API keys is complete. Now it’s time to create a second for Geocoding.

Click the navigation menu at the top left of the dashboard, and navigate to APIs & Services > Credentials.

Click Create Credentials > API Key form the small blue dropdown near the top of the dashboard.

The newly created key will display in the pop-up window. Click Restrict Key to complete the set-up

Name API Key. Use something here that explains that the key is used for geocoding on the website, like UXi Website Geocoding API Key. This key does not need any restrictions.

Click Save.

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.





Existing Projects


If you’ve already created a project and API key for your UXi website, update it using the following process:

Select Project from top dropdown

Click the navigation menu at the top left of the dashboard, and navigate to APIs & Services > Credentials.

Click Create Credentials > API Key from the blue button near the top of the screen.

From the pop-up, click Close.

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.

Click Save.

Click Library from left menu

Search For Geocoding API

Click Enable.


Enable Billing for an Existing Project

  1. Go to the Google Cloud Platform Console.
  2. From the projects list, select the project to re-enable billing for.
  3. Open the console left side menu and select Billing .
  4. Click Link a billing account.
  5. 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.