How to fix the “Google Maps API error: MissingKeyMapError” using WPBakery Visual Composer WordPress plugin?

How to fix the “Google Maps API error: MissingKeyMapError” using WPBakery Visual Composer WordPress plugin? Are having trouble fixing this error on your end?

This error is visible in your console developer tools.

Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error

To fix the issue, first you have to look the script handler that is registered for the google API. To do that, copy the codes below in your functions.php

function wdes_print_scripts_styles() {
 	global $wp_scripts;
 	print_r($wp_scripts);
}
add_action( 'wp_enqueue_scripts', 'wdes_print_scripts_styles');

After this find this “https://maps.googleapis.com/maps/api/js” and get the script handler. See image below.

Then login to your google account and follow this post https://developers.google.com/maps/documentation/javascript/get-api-key to create your own Google API key.

After you have the Google API key, this is the final move. Copy the codes into your functions.php

// AIzaSyAQuPlLxgBEBVfSTA-7Acealr68b_A7z3Y is your Google API key
wp_register_script( 'stm_gmap', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAQuPlLxgBEBVfSTA-7Acealr68b_A7z3Y ' );

NOTE:
Don’t forget to remove this codes after getting the script handler

function wdes_print_scripts_styles() {
 	global $wp_scripts;
 	print_r($wp_scripts);
}
add_action( 'wp_enqueue_scripts', 'wdes_print_scripts_styles');