14


I have a problem with loading google map with the Advanced Custom Field plugin. I make everything like in the instruction on the plugin page here https://www.advancedcustomfields.com/resources/google-map.
I add google-map field in ACF, but on the page where it should be it appears for a second, and then disappears with the inscription "Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details." (see the screenshot). Console says that I need to set the Google API key. I guess I also need to modify some strings in .js file from the ACF instruction, but I don't know which ones. May be someone could help.
Thank you in advance.
screenshot

Bogdanov
  • 143
  • 1
  • 7
  • 1
    I have found temporary solution here https://support.advancedcustomfields.com/forums/topic/google-maps-field-needs-setting-to-add-api-key/ – Bogdanov Jul 09 '16 at 14:31

5 Answers5

22

ACF updated the Google Map documentation

You first have to get a Maps API key and make sure you activate the following APIs :

  • Maps JavaScript API
  • Geocoding API
  • Places API

Then register the API key in your functions.php

If using ACF free

function my_acf_google_map_api( $api ){
    $api['key'] = 'xxx';
    return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

If using ACF pro

function my_acf_init() {
    acf_update_setting('google_api_key', 'xxx');
}

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

In my case I had to delete & recreate the field so that it saves correctly.

Community
  • 1
  • 1
GuCier
  • 6,919
  • 1
  • 29
  • 36
1

A solution could be editing the functions.php in your template 

//TODO: fix api key for advanced custom field
add_action('acf/fields/google_map/api', function($api){
$api['key'] = '<YOUR_API_KEY>';
return $api;
});

or you can check my article for a complete solution

Eric Pham
  • 11
  • 3
1

add this line in your script..replace with your key..

<script src="javascripts/jquery.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY"></script>
<script type="text/javascript" src="javascripts/jquery.googlemap.js"></script>
Manfred Radlwimmer
  • 13,257
  • 13
  • 53
  • 62
Manikandan
  • 151
  • 1
  • 6
0

I have found a couple of different solutions for this issue, but before starting to explain what to do let me remember to you to get a google maps api key. I followed these instructions because I'm using Listify theme, but I'm pretty sure they can help you regardless the theme you have.

Here my solutions:

frontend

Somewhere (I guess in your functions.php or in your-awesome-widget.php) you should have a line like these

wp_enqueue_script( 'googlemaps_api' );

or

wp_enqueue_script( 'googlemaps' );

the solution I've found is add the key in the script registration before enqueuing it, in this way

wp_register_script('googlemaps', 'http://maps.googleapis.com/maps/api/js?key='.$YOUR_API_KEY, false, '3');

wp_enqueue_script('googlemaps');

Backend

This one is quick and totally dirty because I've read that ACF support is already working on the official solution, so, for me, is not a problem if it will be erased by a plugin update.

Open those two files:

  • advanced-custom-fields/js/input.min.js

  • advanced-custom-fields/js/input.js (in theory if you are using the .min version this one is useless)

This piece of code is repeated twice in each file:

google.load('maps', '3', { other_params: $.param(self.api), callback: function(){ ...

change those two occurencies adding the key as querystring, in this way

other_params: $.param(i.api) + 'key=YOUR_API_KEY', callback ...

Et voilá! It should work.

The official page about the topic is here

I hope to have been helpful!

jonnyjava.net
  • 912
  • 7
  • 23
  • Further to this one, make sure you've also enabled _all_ of the required Google APIs for the API key you are using. I was having this problem and I worked out it was because the Maps API by itself doesn't have all the functionality you need for the ACF Google map element to work as intended. I had to add the Place API as well. – rickibarnes Apr 11 '19 at 08:00
0

With the current version (4.4) of ACF, you can find functions.php in the template you are using and add this to the end of the code:

function my_acf_google_map_api( $api ){
    $api['key'] = 'YOUR_API_KEY';
    return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

Change 'YOUR_API_KEY' to your API KEY generated from Google.

Ilya Kushlianski
  • 780
  • 9
  • 15