Question

我在使用高级自定义字段插件加载谷歌地图时遇到问题。我在插件页面上的说明https://www.advancedcustomfields.com/resources/google-map中创建了所有内容。
我在ACF中添加google-map字段，但在应该出现的页面上显示一秒钟，然后消失，标题为“糟糕！出错了。此页面未正确加载Google地图。请参阅JavaScript控制台技术细节。“ （见截图）。控制台说我需要设置Google API密钥。我想我还需要从ACF指令修改.js文件中的一些字符串，但我不知道哪些字符串。也许有人可以提供帮助提前谢谢。
screenshot

Answer 1

ACF更新了Google Map documentation

首先必须get a Maps API key并确保激活以下API：

Google Maps Directions API
Google Maps Distance Matrix API
Google Maps Elevation API
Google Maps Geocoding API
Google Maps JavaScript API
Google Places API网络服务
Google Static Maps API

然后在functions.php

中注册API密钥

如果使用ACF免费

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

如果使用ACF pro

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

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

在我的情况下，我不得不删除＆amp;重新创建字段，以便正确保存。

Answer 2

解决方案可能是编辑模板中的functions.php

//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

使用您的密钥在脚本中添加此行..

<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

我已经为这个问题找到了几个不同的解决方案，但在开始解释要做什么之前让我记住你得到一个google maps api密钥。我跟着these instructions，因为我正在使用Listify主题，但我很确定无论你有什么主题，他们都可以帮助你。

这是我的解决方案：

前端

某个地方（我想你的functions.php或your-awesome-widget.php）你应该有这样的一行

wp_enqueue_script( 'googlemaps_api' );

或

wp_enqueue_script( 'googlemaps' );

我发现的解决方案是在排队之前在脚本注册中添加密钥，以这种方式

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

wp_enqueue_script('googlemaps');

后端

这个很快且非常脏，因为我已经读过ACF支持已经在使用官方解决方案了，所以，对我来说，如果它会被插件更新删除

打开这两个文件：

先进定制场/ JS / input.min.js
advanced-custom-fields / js / input.js（理论上如果你使用的是.min版本，这个没用）

这段代码在每个文件中重复两次：

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

以这种方式更改将这个键添加为查询字符串的两个出现次序

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

Etvoilá！它应该工作。

有关该主题的官方主页是here

我希望有所帮助！

Answer 5

使用ACF的当前版本（4.4），您可以在正在使用的模板中找到functions.php，并将其添加到代码的末尾：

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

更改＆＃39; YOUR_API_KEY＆＃39;到您从Google生成的API密钥。

wordpress高级自定义字段google map api key

5 个答案:

如果使用ACF免费

如果使用ACF pro

前端

后端