Elementor Google Maps not displaying

If you’re experiencing an issue where the Elementor Google Maps widget is not displaying on your WordPress website, there are a few possible reasons for this. One common cause is that the Google Maps API key is missing or incorrect. To resolve this, you can use the following code snippet to add your Google Maps API key to your WordPress site:

function wpsnippets_elementor_google_maps_api_key( $api_key ) {
    $api_key = 'YOUR_GOOGLE_MAPS_API_KEY';
    return $api_key;
}
add_filter( 'elementor/frontend/element_google_maps/api_key', 'wpsnippets_elementor_google_maps_api_key' );

Replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual Google Maps API key. This code snippet uses the elementor/frontend/element_google_maps/api_key filter hook to modify the API key used by the Elementor Google Maps widget.

By adding this code to your theme’s functions.php file or a custom plugin, the Google Maps widget in Elementor should now display properly.

This code snippet can be useful when you want to ensure that the Google Maps widget in Elementor displays correctly by providing the necessary API key.

Examples

Example #1: Enqueue Google Maps API script

This example demonstrates how to enqueue the Google Maps API script in WordPress using the wp_enqueue_script() function.

function wpsnippets_enqueue_google_maps_api() {
    wp_enqueue_script( 'google-maps-api', 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_google_maps_api' );

In this code, we define a custom function wpsnippets_enqueue_google_maps_api() which uses the wp_enqueue_script() function to enqueue the Google Maps API script. Replace 'YOUR_API_KEY' with your actual Google Maps API key. The script is enqueued on the front-end using the wp_enqueue_scripts action hook.

Example #2: Check if Google Maps API script is loaded

This example demonstrates how to check if the Google Maps API script is already loaded in WordPress using the wp_script_is() function.

if ( wp_script_is( 'google-maps-api', 'enqueued' ) ) {
    // Google Maps API script is loaded
    // Your code here
} else {
    // Google Maps API script is not loaded
    // Your code here
}

In this code, we use the wp_script_is() function to check if the Google Maps API script with the handle 'google-maps-api' is already enqueued. You can use this condition to execute specific code if the script is loaded or not.

Example #3: Dequeue Google Maps API script

This example demonstrates how to dequeue the Google Maps API script in WordPress using the wp_dequeue_script() function.

function wpsnippets_dequeue_google_maps_api() {
    wp_dequeue_script( 'google-maps-api' );
    wp_deregister_script( 'google-maps-api' );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_dequeue_google_maps_api', 100 );

In this code, we define a custom function wpsnippets_dequeue_google_maps_api() which uses the wp_dequeue_script() and wp_deregister_script() functions to remove the Google Maps API script from the enqueued scripts. The function is hooked to the wp_enqueue_scripts action with a priority of 100 to ensure it runs after the script is enqueued.