For Google Maps to work, the following items must ALL be correct!

  1. In your Google account, 2 things!
    • You must have created a Google Map API key in your Google account
    • AND The HTTP referrers must be specified correctly with your domain name(s) (as per our instructions)
  2. In your LAC Account
    • The same API key from your Google Account must be copied into the website settings area for each of your in your LAC account
      (Or you may also have added the Key to the Buying Buddy Plugin settings in your WordPress site)
  3. You must have enabled Billing 
    If you already did this but chose the option for a free trial, then this could have expired and you will need to now sign up for a full account.
    See this article to fix this issue and enable billing.

Contents

Typical Errors
How to verify
Visible Errors
Diagnosing Error Messages
How to Fix Issues

Typical Errors and Issues

Problems with Google Map API key will manifest as problems loading the Buying Buddy Map Widget or Google Maps.
These typically occur for the following reasons:

  1. There is a problem with the Google Map API key specified, e.g.
    • No Key specified
    • Wrong Key specified
    • HTTP Referrers incorrect
  2. The Quota for your Google Maps API key needs to be higher - meaning you also need to add billing details to your account.
  3. The Google Maps JavaScript code is loading multiple times (quite common in WordPress or when using packaged website "themes")
    NOTE - this error is referring to the underlying Google Maps JavaScript code - not an actual map!

The Fix The Issue section below explains the simple remedial actions you can take that usually fix the problem and get your maps working!

How to Verify

The Google API system typically takes 5 minutes or so to update.
If you have a WordPress site and you have NOT added the API Key to the Buying Buddy Plugin settings - then wait 24 hours before testing.
If you have a non-WordPress site, or you have a WordPress site and have added the API key to the Buying Buddy settings - then you will be able to verify the API key with 5-10 minutes. We always suggest you close the browser to clear the cache.

To verify that the Google Map API key is setup correctly, you can review any error messages shown in your browsers Web Developer console, OR, you may actually just see errors in the Widgets (see next section).

The best and quickest method to verify correct setup, is to use the Web Developer console in your Browser (Chrome, Firefox and Edge) as follows:

  1. Open any page on your website that is loading the Buying Buddy plugin (e.g. "search" form or "results" etc)
  2. Press F12 to view Developer Tools which loads in a separate window or possibly a sidebar
  3. Then look for 'Console' in the top menu (top of the developer tools window)
    .. and click this to see all the warning and error messages for this page.
    If you see ANY warning or error messages that mention "Google Maps JavaScript API.." then there is an issue!

Visible Errors Displayed on Widgets

Errors will affect the Interactive Map Widget and the Results Widget, and will typically present in the following ways:

1. Map Widget fails to load - nothing shown on page

In this scenario, the widget with the Map simply isn't displayed.
Your page will load, but there is nothing shown where you expect the map to be displayed.

2. Page can't load Google Maps correctly

In this scenario, the map has a dark panel overlay on it - and a message that says:
"This page can't load Google Maps correctly"

3. "Oops something Went Wrong"

In this scenario, the Map Widget loads but is hidden with a grey panel and a message that says:
"Oops something went wrong".

Diagnosing The Error

1. Check Error Messages in your Browser's Web Developer Console

Error messages will be displayed when you view the JavaScript console (e.g. F12 in Chrome, Firefox or Edge to see Developer Tools)

Look for any of the following messages:

  • "Google Maps JavaScript API error: ApiNotActivatedMapError"
  • "You have included the Google Maps API multiple times on this page"
  • "Google Maps API Error: MissingKeyMapError"
  • "You have exceeded your daily request quota for this API"

Console Messages

On your webpage, press F12 to view Developer Tools.
Then click 'Console' in the top menu to see error messages. You may see many messages - so scroll down and identify the map API errors as highlighted below to confirm the specific problem.
This example shows the Chrome Console messages, but Firefox and Edge look practically identical.

Fix The Issue!

1. Google Maps JavaScript API error: ApiNotActivatedMapError

This error message indicates that you have not enabled the "Maps JavaScript API".

This is a common issue and easy to fix. This error means that you did everything else OK, but in your Google API account you didn't yet "enable" the "Map JavaScript API"

To fix this, log back in, to your Google account and go to your Google Cloud Platform (GCP) dashboard https://console.cloud.google.com.

Then in the left menu - choose "APIs and Services". Then follow STEP-5 in instructions for Creating and Setting a Google Map API key.

Once you have "Enabled" the "Maps JavaScript API", allow a minute or so before testing again.

2. Google Maps API Error: MissingKeyMapError

This error message is indicating that there is NO API key setup for Google maps on the current website domain.

To fix this, you must (a) create a Google Map Key - and specify your website domain correctly, then (b) add it to your Leads and Contacts (LAC) Account.
(Or, if you are using an existing plugin or website feature that load Google Maps API then ensure a valid API Key is applied - see #3 below).

See the full instructions for Creating and Setting a Google Map API key

NOTE: Double check you have your domains specified correctly (section 5)

3. You have included the Google Maps API multiple times on this page

The Buying Buddy plugin loads the Google Maps API JavaScript code by default.

However, the Map functions (and other widgets) will often break if the Google Maps API code loads multiple times.

If you have a WordPress site then this error can be quite common. WordPress themes and many WordPress plugins also include Google Maps API code.
For example, the "UberMenu" plugin (wpmegamenu.com) does load Google Maps API (as of Jan '19), and this can be disabled in settings for this plugin.

If you have a custom or other type of site, then have your webmaster check what is loading.

To fix this, you should disable all but one version of the Google Maps API - for example, disable the Google Maps in the Buying Buying plugin.

IMPORTANT
Regardless of how you load the Google Maps API (via the Buying Buddy plugin or some other method) you STILL require a valid Google Map API Key for your website(s) to be specified!
NOTE: If you choose to disable the loading of Google Maps API in the Buying Buddy Plugin, then you will need to follow the instructions for how to apply your API key to your other chosen method. In this case, any API Key added to the Buying Buddy plugin or your LAC account will not be used.

See instructions for how to do this in "Disable Google Maps API Function" section at the bottom of Creating and Setting a Google Map API key.

4. You have exceeded your request quota for this API

This message will be shown if the MAP API Key you are using has exceeded its quota for use.

Typically, this issue can be resolved by returning to your Google API dashboard and taking the following 2 actions

  1. Add billing details to your Google API account
  2. Once billing is set up you will be able to change the Quota for the Maps JavaScript API in your account

See instructions for how to do this in "Set Up Billing and Set Quota" section in Creating and Setting a Google Map API key.

If you are still seeing the same "quota" error message once you have done this, then check if you are relying on a resource other than Buying Buddy to load the Google Maps API and look carefully to confirm you do have a valid API Key applied.
This can be done by inspecting the webpage source code (usually CTRL+u) on a page where Google Maps (i.e. one of the Buying Buddy widgets) should be loading.

Not Your API Key?

We often see WordPress themes and plugins with the Google Maps API already installed as part of the theme. However, if the Theme or any Plugins being used have not explicitly asked you for an API Key, then it is VERY likely that they either do not have an API Key specified, or they are using a common (old) API Key that was added by the developer, which is now being used by anyone else using this theme or plugin!

Any of these scenarios will cause problems trying to load the Google Map API (such as the "daily quota being exceeded").

So in such cases, look at the source code for your webpage (CTRL+u) and search for "maps.googleapis.com" in order to locate the Google Maps API <script>.

It should look something like this:

<script src="https://maps.googleapis.com/maps/api/js?key=AIfdgHgbM-tPZj7dHlU"></script>

NOW CHECK! Make sure that the ?key=[API KEY HERE] is the API KEY that you obtained for YOUR website (see how to Get a Google Map API Key)

If You Need Help

Don't panic - please submit a help ticket and we'll be pleased to help you!

Admin