Google Maps Not Working?

Google Maps Not Working?

21/06/2018

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.

Overview

1 - 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:

2 - 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

3 - 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. Click Here For An Example.

4 - 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.

Recent Posts

Recent Tweets

For privacy reasons Twitter needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept