Joomla 3.x Troubleshooter. Google maps do not show up (API Key issue)

This tutorial will show you how to deal with ‘This page was unable to display a Google Maps element’ error in Joomla templates.

Google announced some changes to the Google Maps APIs authentication and usage limits.

Usage of the Google Maps APIs now requires a key. If you are using the Google Maps API on localhost or your domain was not active prior to June 22nd, 2016, it will require a key going forward. This is why such error occurs.

To resolve the issue, follow the steps below:

1. Go to https://developers.google.com/maps/documentation/javascript/get-api-key website and create authentication key by clicking on a ‘Get a Key’ button;

   

2. Select ‘Create a project’ option and click on ‘Continue’;

   

3. Specify the required credentials: Name, Website URL and hit the ‘Create’ button;

   

4. Copy your new API Key:

   

5. Login to Joomla Dashboard and navigate to Extensions > Plugins section;

   

6. Open the ‘Google Maps’ plugin for editing:

   

7. Navigate to the ‘General Settings’ tab;

   

8. Scroll down and paste your newly created API key into the ‘Googlemaps API Key’ field and save the changes;

   

9. Refresh your website. Google Maps work properly now.