Google Maps Error – Oops! Something went wrong. This page didn't load Google Map

I think I have the correct API key – it is one for a browser.

Here is what I added to my the functions.php file of my child theme (in bold):

<?php
//
// Recommended way to include parent theme styles.
// (Please see http://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme)
//
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array(‘parent-style’)
);
}
//
// Your code goes below
//

function gmaps_workaround(){
?>
<!–Google Maps JavaScript API –>
<script src=”https://maps.googleapis.com/maps/api/js?key=MY_API_CODE_HERE&#8221;
type=”text/javascript”></script>
<?php
}
add_action(‘wp_footer’, ‘gmaps_workaround’);

• This reply was modified 8 years, 5 months ago by shawnbanack.

After spending more time on this than reasonable, the only “fix” that actually worked was the one provided by @Mensmaximus.

“@vinay yes it is a change in the google api however it is a theme issue because the theme is using a deprecated api call.

For those in need of a quick fix please go to https://console.developers.google.com create an account, an app and then a browser api key. If you don’t know what I am talking about visit https://developers.google.com/maps/documentation/javascript/get-api-key for help.

After you have created your key login to your ftp account and browse to /wp-content/themes/enfold/js/. Copy the file shortcode.js to your local computer. Open it in a text editor and locate line 458

src: ‘https://maps.googleapis.com/maps/api/js?v=3.24&callback=aviaOnGoogleMapsLoaded&#8217;

Now append your key to that line:

src: ‘https://maps.googleapis.com/maps/api/js?v=3.24&callback=aviaOnGoogleMapsLoaded&key=Put_your_google_api_browser_key_here&#8217;

Save the file and copy it back to your server. You might make a copy of the old file and keep it if you need it again.

The same change must be made to the file /wp-content/themes/enfold/config-templatebuilder/avia-template-builder/assets/js/avia-element-behavior.js on line 55.

Remember this file will be overwritten with the next update.

Important: You need to clear you browser cache and any cache from caching plugins to see the changes.”

Going forward, I understand this will need to be updated repeatedly as updates come out – would it not be possible to supply a Google API Key field in the editor, which will automatically insert the codes where required?