CODEWITHSUNDEEP
wordpressgoogle-mapsgoogle-maps-api-3advanced-custom-fieldsapi-key
Bogdanov
Bogdanov

Reputation: 143

wordpress advanced custom fields google map api key


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

Upvotes: 14

Views: 9978

Answers (5)

GuCier
GuCier

Reputation: 7425

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.

Upvotes: 22

Manikandan
Manikandan

Reputation: 151

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>

Upvotes: 1

Ilya Kushlianski
Ilya Kushlianski

Reputation: 968

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.

Upvotes: 0

Eric Pham
Eric Pham

Reputation: 11

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

Upvotes: 1

jonnyjava.net
jonnyjava.net

Reputation: 932

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!

Upvotes: 0

Related Questions