wordpress advanced custom fields google map api key - wordpress

Question

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

Answer 1

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.

Answer 2

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

Answer 3

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>

Answer 4

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!

Answer 5

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.