Setting Up Google Maps API Key

06/24/2016

As of June 2016, Google has issued a new update to the Google Maps APIs Standard Plan. In the new update, Google no longer supports keyless access (any request that doesn’t include an API Key) and has made all future product updates only available for requests made with an API Key. Also included in this update are functionality and performance enhancements. To read Google’s official statement, please read this article.

How To Generate An API Key

For your Google Maps to display on your page, you now need to use the Google Maps JavaScript API key. To generate a new API key, please click the button below for Google’s ‘Get A Key/Authentication’ article. Please read it carefully as there are different methods for Standard API users and Premium Plan users.

Read Google’s ‘Get a Key/Authentication’ Article Here

Where To Add API Key

IMPORTANT NOTE – Patch #406523 is only available in Avada version 4.0.3. Please update to this version to be able to apply the patch, or update to the latest version when available.

Step 1Apply Patch #406523 if you’re on Avada version 4.0.3, or update to the latest available Avada version.

Step 2 – Go to the Avada > Theme Options > Contact Form > Google Map panel.

Step 3 – Locate the ‘Google Maps API Key’ option and enter your generated API key.


Encountering An Error/Warning?

If you’re Google Maps aren’t displaying correctly or are returning errors despite following the above instructions, then something may have gone wrong during the process. To pinpoint what went wrong more accurately, try checking your browser’s console for errors.

How To Check Your Console For Errors

For you to be able to accurately diagnose why your Google Map isn’t displaying correctly, you may need to check your browser’s console for errors. To learn how, please see Google’s ‘Checking Errors In Your Browser’ article below.

Read Google’s ‘Checking Errors In Your Browser’ Article Here

How To Resolve Errors

Once you’ve checked your console for errors and determined the specific error message you’re getting, please check Google’s ‘Error Messages’ article for their suggested solution. For example, if you’re getting the InvalidKeyOrNotAuthorizedMapError error, simply look for it on the table provided and you’ll see what the error means under the ‘Message’ column. You can then follow the steps under the ‘Description’ column to solve it.

Read Google’s ‘Error Messages’ Article Here

‘RefererNotAllowedMapError’ Error Message

If you’ve checked your console and you’re receiving this error message, then the problem may be with the URL you’ve provided when setting up the API Key. When adding a key, you’ll most likely have to include asterixes so all pages on your domain will work. For example, *.example.com/*. See a visual example here.

17 Likes
Proudly Serving Over 350000 Satisfied Users!