Hi All,
I hope you’re all staying safe!
I’m having a right mare with something which should be so simple!!
If I add the ACF Google Map JS code to my theme footer, it works.
If I enqueue it via the functions file like so:
function prefix_enqueue_scripts() {
wp_enqueue_script( 'google-maps', 'https://maps.googleapis.com/maps/api/js?key=MY-KEY-HERE' );
wp_enqueue_script( 'google-map-init', get_template_directory_uri() . '/js/acf-map.js', array('jquery', 'google-maps'), '', true);
}
add_action( 'wp_enqueue_scripts', 'prefix_enqeue_scripts' );
It simply won’t work. No errors etc.
Any help would be very much appreciated!
Thanks
You have a typo. You spelled enqueue wrong on the add action line for your function name. I usually add “true” to the google-map script as well.
Hi @rudtek
Thanks for the reply. Can’t believe I missed the typo.
Ok, I’ve amended the typo and tried with true (several ways) but still no joy:
function prefix_enqueue_scripts() {
wp_enqueue_script( 'google-maps', 'https://maps.googleapis.com/maps/api/js?key=KEY' );
#wp_enqueue_script( 'google-maps', 'https://maps.googleapis.com/maps/api/js?key=KEY', true );
#wp_enqueue_script( 'google-maps', 'https://maps.googleapis.com/maps/api/js?key=KEY', '', true );
wp_enqueue_script( 'google-map-init', get_template_directory_uri() . '/js/acf-map.js', array('jquery', 'google-maps'), '', true);
}
add_action( 'wp_enqueue_scripts', 'prefix_enqueue_scripts' );
Checking the console logs, it shows:
Google Maps JavaScript API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
If I check the source code, I can see the script is called but seems to get truncated:
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js'></script>
It’ missing the API key or is that correct?
Thanks
You actually have a key there right? I’m assuming you just removed it for the purpose of the question?
@rudtek yep, thought it was safer removing it in the forum!
You could try mine I guess…
function rt_load_plugin_css () {
$mapkey; //replace variable with your actual ke
$mapkeyurl = 'https://maps.googleapis.com/maps/api/js?key='.$mapkey;
$dir_url = get_template_directory_uri() . '/js/acf-map.js';
wp_enqueue_script( 'map_script', $dir_url, array('jquery'), '1.0', true );
wp_enqueue_script( 'googlemap', $mapkeyurl, true);
}
add_action ('wp_enqueue_scripts', 'rt_load_plugin_css');
Thanks
I still get the same issue
I’m totally baffled as it’s a blank theme with only a couple of plugins but yet it won’t work!
Very odd!
just tried with your code on my server and my api key and it’s working fine.
A couple questions. Are you using a child theme?
On google’s site it says:
If you are loading Maps JavaScript API from the deprecated v2 path, you will get the NoApiKeys warning, even if you specified the key parameter. Please check the v2 to v3 upgrade guide and migrate your application to Maps JavaScript API v3.
Maybe try a new API key?
Morning @rudtek
Thanks for confirming my code worked, that was useful.
I ended up stripping anything else out my functions file, low and behold, the map displayed.
I worked through adding the other functions back in until it broke. I then found the below was the reason why it wasn’t working:
###
# REMOVE QUERY STRINGS FROM STATIC RESOURCES
###
function cleanup_query_string( $src ){
$parts = explode( '?', $src );
return $parts[0];
}
add_filter( 'script_loader_src', 'cleanup_query_string', 15, 1 );
add_filter( 'style_loader_src', 'cleanup_query_string', 15, 1 );
It now works!
Thanks for your time and help!!
don’t think so it will cause any issue , because It has been resolved now …..
