Google Maps Field Frontend Issue

• jmdesignsolutions

• January 17, 2017 at 6:15 am

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

• James

• January 18, 2017 at 12:49 am

Hi @jmdesignsolutions

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($) {

• jmdesignsolutions

• January 18, 2017 at 5:14 am

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

• James

• January 18, 2017 at 11:06 am

Hi @jmdesignsolutions

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 🙂

• jmdesignsolutions

• January 19, 2017 at 3:06 am

Hi James,

That’s great thanks, replaced my original function with the one above and it works perfectly.

Many thanks for your help.

James