ACF Google Maps: MIME type ('text/html') is not executable error

I’m trying to get ACF google map field working. I wrote this function in filters.php:

function my_acf_google_map_api( $api ){
	$api['key'] = '***********';
	return $api;
}
add_filter('acf/fields/google_map/api', __NAMESPACE__ . '\\acf_google_map_api');

But editing post throws this error:

Refused to execute script from 'http://telmo.test/wp/wp-admin/post.php?post=1146&action=edit&=https://maps.googleapis.com/maps/api/js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

It seems like there is no API key in the URI https://maps.googleapis.com/maps/api/js

How can it be fixed?

@aitor Do you happen to be using Bedrock? And Trellis? Because if you are, then you can load the API key as an environment variable.

In Trellis:

// group_vars/**/vault.yml
env:
  google_maps_api: XXXXXXXXXXXXXXXXXXXX

In Sage:

// app/filters.php
function my_acf_google_map_api( $api ){
	$api['key'] = env('GOOGLE_MAPS_API'); // ← Add the environment variable here.
	return $api;
}
add_filter('acf/fields/google_map/api', __NAMESPACE__ . '\\acf_google_map_api');
2 Likes

Thank you very much for the explanation! I didn’t know it, indeed. Finally, I got it. It was a simple typo (as usual, sorry about it). If you see the function name my_acf_google_map_api, in the add_filter is different: acf_google_map_api. :roll_eyes:

I can pass the API key variable both ways (throug trellis or directly) and it works fine.

1 Like

Ah, I missed that. Usually I chuck it all in an anonymous function:

/**
 * Load Google Maps API key for ACF
 */
add_filter('acf/fields/google_map/api', function ($api) {
    $api['key'] = env('GOOGLE_MAPS_API');

    return $api;
});
1 Like