Obtaining a Google Maps API Key

 

New Pricing Plan for Google Maps - July 16, 2018

As of July 16th 2018, new pricing went into effect for Google Maps, Routes, and Places API.  Specific details on the cost associated with each SKU can be found on this pricing plan. MC Trade requires 3 Google API Integrations (SKUs), identified in the pricing as SKUs, with a separate per-request cost.  Google currently includes a monthly recurring $200 credit to offset usage cost for Maps, Routes, and Places. 

A billing account, on Google, with an active credit card is required to establish the Google Maps, Routes, and Places API.

 

Google Maps for Online Directory and Events

The dynamic maps that appear in your Online Directory and Events are powered by Google Maps. To set this up, you will need to complete a one-time set-up of an API key so that MC Trade can generate map data using Google Maps. Once you have the key, you will enter that key in Online Directory Settings area to complete the integration. 

 

Logging into Google Cloud Console

Visit the Google Cloud Console at https://console.cloud.google.com/ and log in with your Google Account.

Note: If possible, it's best to use a Google account set up specifically for your association (as opposed to your personal account). If the association does not have one, click Create Account. 

 

Note: If you are already logged in with a Google account that has not used Cloud Platform before, instead of a login page you will see something like the image below. Click Activate on the top right and then switch accounts, if appropriate, before continuing the activation. 

 

 

Once logged in and activated, you'll see your account avatar on the top right, and can proceed with the next steps.

Setup Google Maps API on Google Cloud Platform

1. Create a new project

• Select Menu Icon -> APIs & Services -> Dashboard.
  
  
  
  
  
• At the top of the page, click on the name of the current project or "Select a Project".
  
  
  
  
  
• In the popup window that appears, click "New Project".
  
  
• Name the project
• Select an organization which should then also fill the Location field. If you are new to Google Cloud Platform, the organization should have been created for you when you signed in for the first time and accepted terms. 
• Click Create
  
  

 

3. Set up a billing account 

•  Make sure your new project name is selected in the blue bar at the top of the page.
• Click the menu icon > Billing
  
  
  
  
  
• Click on 'Link a Billing Account' (button). If you have available billing accounts already created with Google Cloud Platform, you will be able to select one from a dropdown. If not, click on 'Create Billing Account'.
  
  

 

• Follow the steps to add a billing account with an active credit card. 
  - For more information on pricing plan, click here.
  - For details on establishing a daily cap for requests on each integration (SKU), click here. 
• Click "Start my free trial" when the option is offered.

4. Enable Maps API features

• Make sure the dropdown at the top of the page still has your correct project name in it. 
• Click the Menu icon then go to APIs & Services > Library. 
  
  
  
  
  
• Select 'Maps JavaScript API'
  
  
• Select 'Enable
  
  

 

5. Enable additional required API functions

• In the "Additional APIs" section, select the Roads API, then click Enable.
  
  Hint: if you don't see this screen after enabling the first API, you can also access these from the Library option on the left menu, like you did for the Maps JavaScript API above (Menu icon > APIs & Services > Library).
  
  
  
  
• Repeat for the Geocoding API.

 

6. Create credentials for your Maps API

• Select Menu icon -> APIs & Services -> Credentials.
  
  
  
  
• Select 'Create Credentials' at the top of the page and then select "API key" from the dropdown that appears.
  
  

 

• In the popup window, select the 'Copy' button to copy the key to your clipboard.
• Click Restrict Key. 
  
  

 

• On the next screen, under "Application restrictions" select 'HTTP referrers (web sites)'.
• Click 'Add An Item'. You will be creating 2 entries, replacing <yourdomain.com> with your domain as below:
  
           - https://*.<yourdomain.com>/*
           - http://*.<yourdomain.com>/*
  
  Make sure to include the leading asterisk, and the ending asterisk, these allow for all pages from your website to access the API key. 
  
  
• Fill in the first url and click Done. 
  
  
  
  
• Click 'Add An Item" and repeat the process for the second url.
  
  
  
  
• That is all that needs to be done on Google Cloud Console. The API Key should still be saved to your clipboard, so next follow the steps below in MC Trade.
  
  

Adding the API Key to MC Trade

Now that you have your API key created and copied, follow these steps to add the Key to your Online Directory Settings:

1. Go to Admin > Configuration Settings and select the Search Page Settings from the dropdown. The Online Directory Settings window will open.
2. Click the Map menu drop-down arrow.
3. Enter your Key in to the Google Maps API Key field.
4. Click Save Settings at the bottom of the window.The Settings Saved text will appear.
   
   
   
   Note: The following steps repeat the same process for each of the Online Directory pages that can display a Google Map.
   
   
5. Click the Results Page Settings link
6. Click the Map menu drop-down arrow.
7. Enter your Key in to the Google Maps API Key field.
8. Click Save Settings at the bottom of the window.The Settings Saved text will appear.
9. Click the Listing Page Settings link
10. Click the Map menu drop-down arrow.
11. Enter your Key in to the Google Maps API Key field.
12. Click Save Settings at the bottom of the window.The Settings Saved text will appear.

 

Common Errors:

RefererNotAllowedMapError    Error   
The current URL loading the Google Maps JavaScript API has not been added to the list of allowed referrers. Please check the referrer settings of your API key on the Google API Console.

See API keys in the Google API Console. For more information, see Best practices for securely using API keys.

- Check to make sure you are allowing access from your main and sub-domains with MC Trade. Please enter like the below examples:

*web.domain.org/*
*.domain.org/*
https://domain.com/* 

An additional error that can present is a window that overlaps the map that asks if the visitor is the site administrator, if you click OK it takes the visitor to a page on Google with pricing information and explains establishing a billing account for Google Cloud Platform.  This is detailed in steps 4-5 and is a requirement as of July 2018.