CherryFramework 3 Troubleshooter. Google Maps do not show up (API key issue)

This tutorial will show you how to deal with the ‘This page was unable to display a Google Maps element’ error in WordPress templates based on Cherry Framework 3.

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 ‘Get a Key’ button;

   

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

   

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

   

4. Copy your new API Key:

   

5. Login to your WordPress Dashboard. Update Cherry plugin to the latest version. You can download the latest version here.

   

6. Go to Cherry plugin > Shortcode Settings menu. Insert your Google API key into a required field. Save the changes:

   

7. Refresh your website to see the changes applied. Google Map displays properly now: