ACF and the Google Maps API error

Written by Mark Wilkinson on August 30, 2016

If you use Google Maps on your websites, chances are you’ve come across errors regarding the new API key.

This is a bit of a pain, as you need to register each new domain. Luckily, it’s not too tricky.

I’ll outline the steps below.

Getting your API key

First, you’ll need to generate your API key from Google.

Adding your key to ACF

Now you’ll need to tell ACF your Google API key.

Add the following to your functions.php, or other function or plugin file (replacing ‘xxx’ with your API key):


function hd_acf_google_map_api( $api ){
	$api['key'] = 'xxx';
	return $api;

add_filter('acf/fields/google_map/api', 'hd_acf_google_map_api');

For ACF Pro

function hd_acf_init() {
	acf_update_setting('google_api_key', 'xxx');

add_action('acf/init', 'hd_acf_init');

That’s the back-end done, and Google Maps should now display correctly on your admin screens. Now for the front-end.

Fixing the front-end

The next step is to fix the maps being output in the front end. This is a bit more straightforward (at least is was in our case).

Where you reference the Google API script, simply add your new API Key to the end of the URL like so:

<script src=""></script>

You can also do this using wp_enqueue_script or wp_register_script, by using

as the URL parameter.

Highrise Digital | A WordPress agency built for business