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

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：

• 地图 JavaScript API
• 地理编码 API
• 地点 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 专业版

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

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

就我而言，我必须删除并重新创建该字段才能正确保存。

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

瞧！它应该可以工作。

话题官方主页here

希望对你有所帮助！

Answer 5

使用当前版本（4.4）的 ACF，您可以在您正在使用的模板中找到 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');

将“YOUR_API_KEY”更改为您从 Google 生成的 API KEY。