Google Maps Not Working?

21/01/2021

There are a several reasons why your google maps may not be working, the most common issue being no Google Map API key set or set incorrectly. To use the Google Maps JavaScript API, you must register your app project on the Google Cloud Platform Console and get a Google API key which you can add to your app.

Invalid or No Google API Key Set

A typical example of what you will see in place of the Google map option does not have a registered API key or the key has been implemented incorrectly:

Use The Chrome Browser DevTools To Diagnose

You will need the Chrome browser for this, download here. Once installed, navigate to the page that displays the Google Map and follow the instructions below:

Open the Google Chrome browser and navigate to the page/Google map that you want to inspect.
Right-click anywhere on the webpage. Near the bottom of the menu that pops up, you will see ‘Inspect’, click that to open the Chrome DevTools console.
Click on the ‘Console’ tab to check for any JavaScript errors. See an example below:

Google Maps API Error Explanation

Below is a description of that the API error entails, or click here to read detailed information on https://developers.google.com/

MissingKeyMapError The script element that loads the API is missing the required authentication parameter. If you are using the standard Maps JavaScript API, you must use a key parameter with a valid API key. If you are a Premium Plan customer, you must use either a client parameter with your client ID or a key parameter with a valid API key.

Setup Your Google Maps API Key

To set up your Google Map API key please do follow their detailed instructions in the ‘Get API Key’ article.

Here are some important articles to read with regard to recent changes implemented by Google for Google Maps usage:

Get Your Google API Key
Product and pricing changes, guide for existing users (effective starting July 16, 2018).
The API key allows you to monitor your application’s API usage in the Google Cloud Platform Console. See Google Cloud Platform Console help for more information.
If you are a Standard Plan customer, with an API key you have access to generous free daily quota, as well as the option to increase your daily quota by enabling pay-as-you-go billing.

Important Note: Google announced that from June 11th it is launching pricing plan for it’s Maps service. Each generated map API key will get $200 free usage per month so in most cases users will be able to continue using maps without a problem. Continue reading below to know more about this.

Users will need to add their billing info to Google Maps, although they won’t be charged unless they are over $200 per month. Google already sent an email to users which use it’s Maps service. That email also includes their assessment for currently used API keys, so it should be clear if user would need to pay for Maps service in future or not. View Google’s email notification.

Google Maps Platform Pricing Plan

Check The Address Format

Use a correct address and not google map embed code, or longitude/latitude. It has to be a written address, example below:

775 New York Ave, Brooklyn, Kings, New York 11203

Copyright Text Formatting

The copyright text has to have complete, valid HTML markup. Valid HTML is required for theme to function properly. Please make sure to format the HTML correctly anywhere so that issues like this don’t happen.

Potential 3rd Party Plugin Conflict

Third party plugins may be conflicting with the map feature. Please disable any plugins that were not included with Avada to see it if fixes the issue. If it does, enable the plugins one by one to find the culprit.