Home › Forums › Front-end Issues › Google Maps Field Frontend Issue
Hi,
I’ve come back to a website that I’ve been working on for over a year and it appears that the Google Maps updates that came out last year have caused my maps to stop working on my site using my ACF Pro field.
I’ve read several threads on here about how to get them working and have got them showing up in the WP admin but are having no luck on the front end. Looking the Chrome developer console it’s down to the API key being missing even though I’ve added the required code to my theme’s functions.php file but it has no effect:
function my_acf_init() {
acf_update_setting('google_api_key', 'xxx');
}
add_action('acf/init', 'my_acf_init');
Do you know what I’m doing wrong? The map loads for second then I guess the API authentication kicks in and I then get an “Oops Something Went Wrong” error.
Thanks in advance,
James
It may be necessary to modify the map JS that you are loading for the page template and pass the new API key via this script:
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script type="text/javascript">
(function($) {
Hi James,
Thanks for the reply, sorry I’m a little confused where I would add this. Does it need to go in the functions file? At the moment I have the following code:
function my_theme_add_scripts() {
wp_enqueue_script( 'google-map', 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false', array(), '3', true );
wp_enqueue_script( 'google-map-init', get_template_directory_uri() . '/js/google-maps.js', array('google-map', 'jquery'), '0.1', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_add_scripts' );
I’ve tried modifying this to the following but it doesn’t seem to have any effect:
function my_theme_add_scripts() {
wp_enqueue_script( 'google-map', 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false', array(), '3', true );
wp_enqueue_script( 'google-map', 'https://maps.googleapis.com/maps/api/js?key=KEYGOESHERE', array(), '3', true );
wp_enqueue_script( 'google-map-init', get_template_directory_uri() . '/js/google-maps.js', array('google-map', 'jquery'), '0.1', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_add_scripts' );
Thanks,
James
Please keep in mind that you only need to add the Google Maps script once. So it should be something like this:
function my_theme_add_scripts() {
wp_enqueue_script( 'google-map', 'https://maps.googleapis.com/maps/api/js?key=KEYGOESHERE', array(), '3', true );
wp_enqueue_script( 'google-map-init', get_template_directory_uri() . '/js/google-maps.js', array('google-map', 'jquery'), '0.1', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_add_scripts' );
Please don’t forget to replace the “KEYGOESHERE” text with your Google Maps API key.
If the issue persists, could you please check the console tab of your developer tools for any JavaScript error messages on the page?
Thanks 🙂
Hi James,
That’s great thanks, replaced my original function with the one above and it works perfectly.
Many thanks for your help.
James
The topic ‘Google Maps Field Frontend Issue’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.