The Buying Buddy Plugin loads the Google Maps JavaScript code which is required for the presentation of Google Maps.

To use Google Maps, you require a Google Maps API key (a long unique number that will be used when Maps load). Without this key, you cannot display Google Maps on a website.
Your Google API Key comes from YOUR Google account and is added to each Website Configuration panel for all your Websites set up in your Leads and Contacts Account.

Your Google Map API Key needs to be added to Website Settings for each of your authorized domains in your Buying Buddy account.

There are 2 things to do!
1. Generate your Google Map API Key from your own Google account, and enable the Maps JavaScript API and also the Places API
2. Add the API Key to your Authorized Domains in your Buying Buddy  account.

This support article explains how to do this.

Download and print this 1-page checklist to help as you setup your Google Map Key.

The VIDEO below will also walk you through the full process too.
**NOTE** The video may show a slightly different set of screens due to Google changing its flow and interface on a regular basis.
But we do try to ensure the actual instructions in this article below accurately reflect Google's current system. Let us know if you see items that have changed.

VIDEO: How to Generate and Set a Google Map API Key

If you added the Key and are still having problems getting Maps to display then see the Google Maps Troubleshooter

Google "Billing Account" Required
Google requires that billing details (i.e. a credit card) are setup in your Google account in order to use the API (explained in "Setup Billing" below).
NEED ASSISTANCE?
If you need Buying Buddy staff to assist with this process, we will be able to help once you have completed steps 1-4.
Please complete steps 1-4 below and then refer to the instructions here to authorize us to access your google API project, which will show you how to give us access.
Buddy staff will not be able to add or update your Google Account payment details.

Steps

  1. Login to your Google Account
  2. Start the Process
  3. Create Your Google API Project
  4. Setup Billing
  5. Enable Maps JavaScript API and Places API
  6. Set Quota
  7. Create Credentials
  8. Restrict Key and Authorize Named Websites (HTTP referrers) to Use your API Key
  9. Copy the API key to your clipboard for use in the next steps
  10. Add the Google Maps API Key to Your Buying Buddy Account

Also

Generate a Google Maps API key

Article updated Feb 2019.
Please note! Google keeps evolving their page designs - so the actual panels you see may vary slightly from the screenshots shown below.
Please let us know if you discover major changes to this process!

1. Login to your Google Account / Gmail account first.

You must have a Google Account (e.g. Gmail account) to generate a API key for Google Maps.
If you do not have a Google Account - you can create your new Google Account here.

If you are using a GSUITE account (personal, team or company), then you may need to have your GSUITE administrator enable the Google Cloud platform. If this creates a problem, you should use a personal Google account instead.

2. Start the Process

Once you are logged in to your Google Account go to the Google Cloud Platform dashboard
https://console.cloud.google.com

Click the main menu icon at the top left to show the menu.
We are going to look at two menu items here: "Billing", and "APIs & Services".

3. Create Your Google API Project

In the top blue bar of the page, click the current project name (e.g. "API Project") to open a pop-up panel so you can add a NEW PROJECT.

Click the "New Project" link/button on the top right of the pop up panel to create a new project.

Give your project a meaningful name (e.g. your website domain name!)  so that you know what this API key is for in future.

Then create your project by clicking "CREATE".
Your project name should be available after 30-60 seconds.

From now on ALWAYS ENSURE that the project name you just created is selected in the top blue bar.

4. Set Up Billing

IMPORTANT. Google announced that as of June 2018, the Google Map API is now a billable service.
So you will need to set up billing details in order to use Maps API.

However, Google provides $200 of Free Use per month - which equates to 28,000 uses of the Map API.
And, we will show you how to set a Quota so that you never exceed the free threshold.

In order to have the free credit applied to your account, Billing details must be established.

QUOTA
When map views Quota is exceeded (for any reason), maps will not function correctly. On your website you will see warning and error messages on the Map display.
(For webmasters, you will also see browser "console" JavaScript errors that say your "Quota is exceeded").

Make sure you follow instructions on how to use the Quota settings (section 6 below) to ensure you never get billed.

However, bear in mind:

  • It is highly unlikely that you will receive any charges for using the Google Map API service unless your website is receiving many thousands of visitors per month.
    (Google allows up to $200 free use per month, which equates to 28,000 dynamic map views per month).
  • Our instructions show you how to apply a Quota (in Step 6 below) - which can ensure you never exceed the threshold
  • If charges ever are incurred, Google will notify you so you can be in complete control.
  • The fees charged will be incremental over the first free $200.
    To put this in context, as of May 2020, Google's pricing is just $7 per month for an additional 1,000 Dynamic Map views.

IMPORTANT : DO NOT SELECT A FREE TRIAL!
Do not select any offered "free trial". Set up your billing account as a full account. If you set up as a free trial, your map will stop working when the trial is over.

Make sure your new Project name is selected in the top blue bar.
From the Menu, click "Billing".

(Verify the Project you just created is selected in the TOP blue bar)
Click "Link a Billing Account" to create and link a billing account with this project.

Follow the next sequence of instructions to accept terms and conditions, and add your payment method.

You may see Google special offers and a year of credits which you MUST IGNORE (the standard pricing includes $200 of free use per month).

Need Assistance?
Now that you have created your Project and set up billing, if you need our assistance for the remaining steps, please follow the instructions set out in the instructions to authorize us to access your google API project.

5. Enable "Maps JavaScript API" and "Places API"

Make sure your new project name is selected in the top blue bar on the page.

Go to the API Library.
Click the main menu icon, and go to "APIs & Services > Library".

The API Library page is displayed.
Find the tile that says "Maps JavaScript API", and click the box to show the MAPS API page.

On the Maps API page, click the blue "ENABLE" button for this API.

The page may take a few moments now to reload as the Maps API is being enabled on your project.

5b. Now repeat, to enable the "Places API".

(Verify you still have the right project selected in the top blue bar!)

From the Main Menu (hamburger) icon - select "APIs & Services > Library".
In the API library, identify and click "Places API".
On the next screen click "ENABLE".

Great! Now you have enabled both the APIs needed.

6. Set a Quota

Setting a Quota will ensure you never get billed for use beyond the quota.

Click the main menu icon at the top left to show the menu.

Go to APIs & Services > Dashboard
On the lower part if the Dashboard you will see a list of all the APIs that are enabled. You should see both "Maps JavaScript API" and "Places API" listed here.
Click "Maps JavaScript API" to go the Overview page for this API.

On the Maps JavaScript API page there are menu item in the TOP section.
Click "Quotas".

IMPORTANT!
If you see messages about needing a billing account but you have already done this, you should do a 'hard' reload of the browser page (e.g. CTRL+F5 or similar) to force Google to see that your billing account is indeed setup and connected.

In the Quotas panel, look down to the BOTTOM of the page to find the small table showing "Quota Name" and "Limit"
For "Map loads per day", click the "pencil" icon to edit / set the Quota.

In the Quota Limit pop-up panel:

  • First! "uncheck" the "unlimited" check box,
  • and then type "1000" (one-thousand)  into the text box.
    (you will need to check the confirmation box too as you are reducing quota by more than 10%)

We suggest changing this to 1000, as this will then help ensure you don't exceed the free level of 28,000 per month.Google will ask you to confirm that you want to do this - so check that option,
Click "Save".
The quota is applied within 1-2 minutes.

7. Create Credentials (API Key)

After you have set Quotas, click the main MENU icon to show the main menu and go "APIs & Services > Credentials"

You may see a warning message at the top of this page that says "Remember to configure the OAuth consent screen.."
IGNORE THIS! This is not required.

When the Credentials panel is loaded - click the top button to "Create Credentials" and then select and click the "API Key" option.

Your API Key will then be created and you will see this confirmation panel.

Now click "RESTRICT KEY"

8. Restrict Key and Authorize Named Websites (HTTP referrers) to Use your API Key

IMPORTANT !! Restricting the key is very important as it will stop unauthorized use of your API key and theft of your quota.

In this step, you will be specifying the website domain names that are authorized to use your Map API Key.

You will then see the API Key panel (shown above) where you can set up Key Restrictions.
NOTE: Only setup "Application Restrictions" as described below - DO NOT set up "API Restrictions" (further down this page) - leave this as "Don't Restrict Key".

IMPORTANT. MOST MISTAKES ARE MADE HERE!

  1. Look down this panel for "Application Restrictions" and ensure this is selected.
  2. Under Application Restrictions, check the radio button option for HTTP referrers (web sites)
  3. Then, under this, type in the addresses of domains to authorize.
    Do one at a time MAKE SURE YOU TYPE THE ADDRESS IN CORRECTLY AS FOLLOWS:

    *** YOU MUST SPECIFY YOUR WEB ADDRESS AS SHOWN ***
    The way you type this in is IMPORTANT - the Map Display WILL NOT WORK unless this is 100% accurate!

    For most websites, you should specify two website addresses
    Type these in exactly as explained here:

    1. domain.com/*
      - i.e. type your domain with a add a forward-slash and a star symbol after
      Do not specify www or anything before the domain.
    2. *.domain.com/*
      -i.e. prefix with star and period and then your domain with a add a forward-slash and a star symbol after
      DO NOT type in http or www, or anything else like this before the domain name.
  4. Repeat for additional website addresses
  5. Click the SAVE button
    It will take about 5 minutes before the new API Key is recognized in Maps on your website.

NOTE: If your website is on a temporary URL while in development, then  you should also add the development URL too.
In the screenshot below you can see that I have THREE referrers authorized - two are the final URL, and one is the development URL.

9. Copy the API key to your clipboard for use in the next steps

On the same panel in the section called API Keys, click the icon at the end of the field to "copy to clipboard".

10a. Add the Google Maps API Key to Your Buying Buddy Account

The following will explain how to do this depending on the method and version of the Buying Buddy Plugin you are using.

You should always add the API key to your Buying Buddy account - see instructions below.

In addition, if you have a WordPress site, or you are using our PHP API it is always advisable to also add the API Key to your website too (explained below).

If your website system is already loading Google Maps then you should choose to prevent Buying Buddy from loading Google Maps as this will cause conflicts.
See Disable Google Maps API below.

Leads and Contacts - Add Google Maps Key

Add the Google Maps API key to your LAC Account in the Website and Widget Settings panel.

1. Copy the API key you generated from the Google Maps API Manager.

2. Log in to your Buying Buddy account.
Navigate to: Websites & Widgets > Authorized Domains
Then click the "Website Settings" link for your website.

3. For each of your websites, paste in the API key for that domain in the "Google Map API Key" section.
NOTE: If you are specifying multiple domains, then in your Google API panel each of these domains should have been set up as authorized referrers - see step 7 above.

4. Click SAVE to save this key for this website / domain.

You should now be able to use Google Maps on your website.
**Sometimes Google Maps API can take 5-20 minutes to be recognized and authorized by Google**

If you have trouble displaying Google maps on your site, please verify that the Google Maps JavaScript API is enabled in the Google Maps API Manager.

If you are having problems getting Maps to display then see the Google Maps Troubleshooter

10b. Buying Buddy WordPress Plugin (optional)

The Buying Buddy WordPress plugin will refresh settings (including the Maps API Key) from your LAC Account settings on a daily basis. There is no need to add the API Key to the Buying Buddy WordPress Plugin unless you need to utilize the API Key immediately. Otherwise, by waiting 24 hours, the plugin will be automatically updated with your Google Map API Key from your LAC Account.

Follow these instructions to add your Map API Key to the WordPress plugin:

In your WordPress Admin Dashboard - go to Plugins and and click "Options" for the Buying Buddy plugin to enter the API Key.
Add the Google Maps API Key to the Buying Buddy Plugin Options.

10c. Using the PHP API for SEO Plugin

Once you have added the API Key to your LAC account, add the Google Map API Key to the "googleapis.com" script which is part of the PHP API Buying Buddy JavaScript in the <head> of your site.

Disable Google Maps API

If you are having problems getting Maps to display then see the Google Maps Troubleshooter

The Buying Buddy system always requires Google Maps JavaScript API Code to be loaded in order to function.
However, if a separate component on your website or WordPress theme or Plugin is already loading the Google Maps API then can disable this method on Buying Buddy to prevent conflict.
IMPORTANT: If you rely on a separate system to load the Google Maps API then you still need to ensure that a valid API key is being specified.
The method for applying the API key will depend on your theme or plugin - but you MUST apply your OWN key to avoid issues.,

Buying Buddy WordPress Plugin

Go to your WordPress plugins view - then click Buying Buddy Plugin Settings from your WordPress Dashboard.
Choose the option to disable Google Maps API.
(You still require your Google Maps API Key to be added to your LAC Account)

JavaScript Plugin

Disable the Google Maps function as this is provided in your website JavaScripts.
This can be done by adding this parameter to the end of the Buying Buddy JavaScript code: "/gmap/false", as shown in the example below:

<script type='text/javascript' src='https://www.mbb2.com/mbbv3/index/acid/YOUR_ACCOUNT_ID/gmap/false'></script>

PHP API

Disable the Google Maps function by deleting the "googleapis.com" script which is part of the PHP API Buying Buddy JavaScript.

Admin