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

  • There’s another post about this same issue, which was inadvertently marked as solved: https://support.advancedcustomfields.com/forums/topic/google-maps-missingkeymaperror/

    This problem makes it impossible to add the ACF Pro Google Map field to any new domain. Google has updated its policy, and requires an API key for any new domain.

    I’ll refrain from re-posting the details here (see linked post), but I’m having the exact same problem referenced in the above post, and this needs a fix as soon as possible.

    I’ve also filed a support ticket, but haven’t heard back in more than 24 hours, and I wanted to post here so others on the Forum can find that this is an outstanding issue.

  • I have reported this issue to the developer

  • Thank you John! I tried looking at the plugin code myself to see if I could offer a patch, and came up confused. If I get some time I’ll look at it some more.

  • I think the google maps field is one of the fields I’ve never used…. but come to think of it I was looking at a client site the other say and the map that was supposed to be on the site was missing, it must be that the person that added the map must have used the ACF map field. At the time I thought it had to do with me testing and having some of the JS on the site disable. Looks like I’ll need to fix that.

  • Big bump here….does anyone have an update on where this is at for a fix? It does seem like we really need an ACF setting for a site’s Google Map API key. This key would allow the maps to work on /wp-admin/ but then also be accessible to developers for use on front end implementations as well.

    Is this approach something that others see as a solution?

  • Like I said above, it’s been reported to the developer and he’s looking into a solution.

  • As a temporary fix, you can follow these steps:

    – get a Google API Key

    – 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

    – open the acf-input.min.js file located in the plugins folder of your WordPress-install (full path: /wp-content/plugins/advanced-custom-fields-pro/assets/js/acf-input.min.js)

    – find sensor=false&libraries=places and replace both instances with key=XXX&libraries=places (replace XXX with your own API key)

    – enjoy!

    IMPORTANT REMARK: as soon as you update the ACF plugin, the file will be overwritten and the key will be lost, hopefully there will be a proper solution in the next release of ACF

  • Thanks for posting the temporary solution @Joachim

  • Hi I am also encountering this issue but the fix noted above resolves the issue in the admin but not on the front-end, as you can see here: https://www.dropbox.com/s/o0r0qrrd6lj8i9c/googlemapissue.jpg?dl=0

    Is there any solution?

  • @gab1982 the temporary fix is only intended for the WordPress backend because I suppose everyone has his own way of implementing the Google Map in the frontend.

    If you used the embed code mentioned on the official ACF Google Maps page (https://www.advancedcustomfields.com/resources/google-map/), you just have to change the script-tag:

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

    becomes

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=XXX"></script>

    XXX being your own Google API key

    A better option to include the JS-file in your frontend is by registering & enqueueing the script, you can do this by placing the following code inside your functions.php file, or have a look at a specific tutorial like https://premium.wpmudev.org/blog/adding-scripts-and-styles-wordpress-enqueueing/ (just the first that came up in Google search, I have nothing to do with wpmudev)

    /**
     * enqueue scripts and styles 
     *
     */
    
    function nr_load_scripts() {
    		
    	wp_register_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?key=XXX',null,null,true);  
    	wp_enqueue_script('googlemaps');
    		
    }
    add_action( 'wp_enqueue_scripts', 'nr_load_scripts' );

    – again, replace XXX with your own Google API key
    – change the true to false if you want to load the script in de header of the page instead of at the bottom.

    • gab1982

    • June 27, 2016 at 10:37 pm

    Thanks @joachim, that worked great. Does anyone know when a permanent fix will be made for this?

  • Thanks @joachim for the temporary fix, but it still doesn’t work properly. You can set the marker on the map, but you can’t do it via text field (autocomplete doesn’t work and text doesn’t affect on map at all).

  • @constantine_ua are you sure you added al the different Google Maps API’s?
    The one used to load the map is another one than the one to look up the address.
    I switched them all on:
    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

    If you check your browser-console, I believe Google will give you an error stating which one is missing.

    • leanda

    • June 28, 2016 at 8:54 pm

    Thanks @joachim for this temporary fix. Any news on a permanent fix?

    Thanks

  • @joachim sorry, after few hours it’s working. Thanks again for the help.

  • Hey guys,

    It looks like the fix is available with of 5.4 RC1! http://d.pr/i/1b6ZB

    If you go to your Account, then there by download, click “See all versions”, there is the download link.

    EDIT:

    I just wanted to say that I did the update, and got it to work! There doesn’t appear to be a UI for setting the API key just yet (or maybe I’m just missing it), but it’s easy enough to set with a filter:

    add_filter('acf/settings/google_api_key', function () {
        return 'your-api-key';
    });

    You also need to make sure that the Google Maps JavaScript API is enabled for using with your project in the Google APIs Developer Console where you obtained your key.

    Cheers!

  • This is great news, thanks for the update @aaemnnosttv. Do you suppose that something similar will be implemented into ACF 4.x? Fingers crossed.

    • 7am

    • July 1, 2016 at 7:01 pm

    I have the same problem with ACF not pro. I’m a teacher. Four in six students had this problem. I didn’t really understannd why some and not all of them.

    The solution is almost the same:

    As a temporary fix, you can follow these steps:

    – get a Google API Key

    – 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

    – open the input.min.js file located in the plugins folder of your WordPress-install (full path: /wp-content/plugins/advanced-custom-fields/js/input.min.js)

    – find sensor=false&libraries=places and replace both instances (it’s present 2 times) with key=XXX&libraries=places (replace XXX with your own API key)

    – enjoy!

    IMPORTANT REMARK: as soon as you update the ACF plugin, the file will be overwritten and the key will be lost, hopefully there will be a proper solution in the next release of ACF

  • @7am As of June 22, 2016 Google Maps V3 no longer supports keyless access from domains which has never had a Google Map on it before. So some of the students will be using domains that are already known by Google before the 22nd and some are using new domains I suppose.

  • There is a fix for this in the new version of ACF Pro. You can get it by logging into your account and downloading from there. It is 5.4.0-beta3.

  • The new beta version has not resolved the back end issue for me?
    Are there any additional steps to take?

    Thanks

  • @jakelevell I’m still using the temporary fix till the new ACF version is out of beta and the addition of the API key is documented.

  • @joachimniceandrobust-be I have reverted to the tempory fix! Will wait until the release is out of beta, thanks

  • I’m sure if it wasn’t for this the Beta version wouldn’t be available to be honest. There are several other new features in it that are still a bit buggy.

    Once you update to the Beta you need to set up a Google Map api Key https://developers.google.com/maps/documentation/javascript/get-api-key

    I have not used this yet, so I’ve been looking at the code. It appears that Elliot has set this up to work on a filter, at least for now. I don’t see a place in ACF where you can enter the values and maybe he plans to add this later. At any rate, here is the relevant code from ACF

    
    
    	
    	
    	/*
       	*  input_admin_footer
       	*
       	*  description
       	*
       	*  @type	function
       	*  @date	6/03/2014
       	*  @since	5.0.0
       	*
       	*  @param	$post_id (int)
       	*  @return	$post_id (int)
       	*/
       	
       	function input_admin_footer() {
    	   	
    	   	// vars
    	   	$api = array(
    			'libraries'		=> 'places',
    			'key'			=> acf_get_setting('google_api_key'),
    			'client'		=> acf_get_setting('google_api_client')
    	   	);
    	   	
    	   	
    	   	// filter
    	   	$settings = apply_filters('acf/fields/google_map/api', $api);
    	   	
    	   	
    	   	// remove empty
    	   	if( empty($api['key']) ) unset($api['key']);
    	   	if( empty($api['client']) ) unset($api['client']);
    	   	
    ?>
    <script type="text/javascript">
    acf.fields.google_map.api = <?php echo json_encode($api); ?>;
    </script>
    <?php
    	
       	}
    }
    

    It appears that you’ll need to create a filter in functions.php to set up the api key.

  • @Joachim Thank you! This right here is exactly what I needed:

    /**
     * enqueue scripts and styles 
     *
     */
    
    function nr_load_scripts() {
    		
    	wp_register_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?key=XXX',null,null,true);  
    	wp_enqueue_script('googlemaps');
    		
    }
    add_action( 'wp_enqueue_scripts', 'nr_load_scripts' );
Viewing 25 posts - 1 through 25 (of 64 total)

You must be logged in to reply to this topic.

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 Cookie Policy. If you continue to use this site, you consent to our use of cookies.