Google Maps field needs setting to add API key

• jaddess

• August 22, 2016 at 3:39 am

I have managed to display fields in post including a map.
Am now trying to figure out how to set multiple points on a map.

• thekirankumardash

• September 29, 2016 at 9:58 pm

This is what I did and worked for me.

Go to the mentioned path in your plugin folder: advanced-custom-fields\core\fields

Inside the fields folder you will find google-map.php

At around line number 291 you will find a function

`function input_admin_footer() {

// vars
$api = array(
‘libraries’ => ‘places’,
‘key’ => ”,
‘client’ => ”
);

……..

}`

Add your api key to the ‘key’ for example:

function input_admin_footer() {
	   	
	   	// vars
	   	$api = array(
			'libraries'		=> 'places',
			'key'			=> 'your google map api key here',
			'client'		=> ''
	   	);
	   	
	   	........
	
   	}

Get your api key here:

https://developers.google.com/maps/documentation/javascript/get-api-key

• qb16

• November 23, 2016 at 8:57 pm

Here is my working solution.

Just edit the functions.php and add the following lines and replace "YOURAPIKEY" with your Google Maps API key.

function fix_gmaps_api_key() {
	if(mb_strlen(acf_get_setting("google_api_key")) <= 0){
		acf_update_setting("google_api_key", "YOURAPIKEY");
	}
}
add_action( 'admin_enqueue_scripts', 'fix_gmaps_api_key' );

• physalis

• November 30, 2016 at 12:46 am

Thank you, @qb16 , that helped a lot. Has become quite a hassle to get a simple map with a tiny marker setup with ACF to display on a website (not ACF’s fault though), thanks for helping out!

• comzept

• December 6, 2016 at 3:52 am

Hi Guys,

I´m using ACF Pro 5.5.1 on WP 4.6.1 with “Above The Fold Optimization”-plugin and unfortunately all the good ideas in this thread are not working at all. Does anybody have any idea on this or uses the same combination and it´s working?

• fabianmarz

• December 9, 2016 at 4:23 am

As I was looking through the source code I found this filter in the get_setting() function

[…]
// filter for 3rd party customization
if( substr($name, 0, 1) !== '_' ) {
  $value = apply_filters( "acf/settings/{$name}", $value );
}
[…]

So you could simply add a filter like this:

add_filter('acf/settings/google_api_key', function ($value) {
  return 'YOUR_API_KEY';
});

• comzept

• December 23, 2016 at 3:11 am

Hi fabianmarz,

thx for your input. unfortunately there was no change at all. We just de-activated the Above-plugin und everything works perfect. With just “71” at Googles pagespeed. But functionality is more important than a good rank.

Thank you

• rockethouse

• February 3, 2017 at 6:02 pm

None of these fixes are working, i’ve tried literally everything and nothing works! This is a seriously frustrating bug. I’ve spent about 2 hours trying to get this to work!

Elliot when will you fix this??????

EDIT: Well I fixed it by re-installing ACF… who would have thought!

• dannhanks

• April 14, 2017 at 7:44 pm

thanks fabianmarz! I added your code:

add_filter('acf/settings/google_api_key', function ($value) {
  return 'YOUR_API_KEY';
});

obviously replacing ‘YOUR_API_KEY’ with my google maps Api key and the maps are now showing!

• dimitriadisg

• June 9, 2017 at 8:15 pm

Come on guys, when are you going to allow us to enter the api key the normal way ? Filters are cool, but I don’t want to search for this page every time I need a google maps field.

• Ducem

• July 22, 2017 at 9:41 am

Спасибо помогло!

– make sure the Google Maps Api’s are enabled:
Google Maps Directions API
Google Maps Distance Matrix API
Google Maps Elevation API
Google Maps Geocoding API
Google Maps JavaScript API
Google Places API Web Service
Google Static Maps API
– copy the generated API key

• prikkprikkprikk

• October 18, 2017 at 9:57 am

Google Maps worked fine in the backend on my local dev setup, but when I pushed it to staging, the API reports “Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys” in DevTools console.

I have tried many of the solutions above, but ended up with this in functions.php of my theme, which seems to be the recommended way:

// Setting the Google Maps API key for ACF
function bmhe_acf_init() {
acf_update_setting(‘google_api_key’, ‘MY_API_KEY’);
}
add_action( ‘acf/init’, ‘bmhe_acf_init’ );

Can somebody tell me why Google isn’t getting this API?

• prikkprikkprikk

• October 18, 2017 at 6:46 pm

Never mind, I found it out myself: You need ACF Pro for that to work. For the free version, there’s another way. More details here.

• Artyom4ik

• December 27, 2017 at 12:41 am

Hi guys.
Here is the working func. Just paste

YOUR_KEY = google maps API key

advanced-custom-fields-pro/assets/js/acf-input.min.js

/*
		*  is_ready
		*
		*  This function will ensure google API is available and return a             boolean for the current status
		*
		*  @type	function
		*  @date	19/11/2014
		*  @since	5.0.9
		*
		*  @param	n/a
		*  @return	(boolean)
		*/
		
		is_ready: function(){ 
			
			// reference
			var self = this;
			
			
			// ready
			if( this.status == 'ready' ) {
				
				return true;
				
			}
			
			
			// loading
			if( this.status == 'loading' ) {
				
				return false;
				
			}
			
			
			// no google
			if( !acf.isset(window, 'google', 'load') ) {
				
				// set status
				self.status = 'loading';
				
				
				// load API
				$.getScript('https://www.google.com/jsapi', function(){
					
					// load maps
				    google.load('maps', '3', { other_params: 'sensor=false&key=YOUR_KEY&libraries=places', callback: function(){
				    	
				    	// set status
				    	self.status = 'ready';
				    	
				    	
				    	// initialize pending
				    	self.initialize_pending();
				        
				    }});
				    
				});
				
				return false;
					
			}
			
			
			// no maps or places
			if( !acf.isset(window, 'google', 'maps', 'places') ) {
				
				// set status
				self.status = 'loading';
				
				
				// load maps
			    google.load('maps', '3', { other_params: 'sensor=false&key=YOUR_KEY&libraries=places', callback: function(){
			    	
			    	// set status
			    	self.status = 'ready';
			    	
			    	
			    	// initialize pending
			    	self.initialize_pending();
			    	
			    	
			        
			    }});
				
				return false;
					
			}
			
			
			// google must exist already
			this.status = 'ready';
			
			
			// return
			return true;
			
		},
		
		initialize_pending: function(){
			
			// reference
			var self = this;
			
			this.$pending.each(function(){
				
				self.doFocus( $(this) ).initialize();
				
			});
			
			
			// reset
			this.$pending = $();
			
		},