Support

Account

Home Forums Backend Issues (wp-admin) Google Maps field needs setting to add API key

Solving

Google Maps field needs setting to add API key

  • 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.

  • 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

  • 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' );
    
  • 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!

  • 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?

  • 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';
    });
    
  • 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

  • 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!

  • 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!

  • 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.

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

    – 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

  • 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?

  • 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.

  • 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 = $();
    			
    		},
Viewing 14 posts - 51 through 64 (of 64 total)

You must be logged in to reply to this topic.