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

Posted 2023-03-25

【中文标题】wordpress 高级自定义字段 google map api key

【英文标题】：wordpress advanced custom fields google map api key

【发布时间】：2016-11-11 23:08:49

【问题描述】：

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

【问题讨论】：

我在这里找到了临时解决方案support.advancedcustomfields.com/forums/topic/…

【参考方案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');

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

【讨论】：

这对我有用！谢谢

ACF 网站说只有“Maps JavaScript API、Geocoding API 和 Places API”必须被激活。经过测试并且可以工作。

谢谢@HenningFischer，刚刚根据您的评论更新了答案:)

【参考方案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

【参考方案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>

【参考方案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

希望对你有所帮助！

【讨论】：

除此之外，请确保您还为您正在使用的 API 密钥启用了所有所需的 Google API。我遇到了这个问题，我发现这是因为 Maps API 本身并不具备 ACF Google 地图元素按预期工作所需的所有功能。我还必须添加 Place API。

【参考方案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。

【讨论】：

这个答案的质量不是很低，但这与现有答案非常相似。这个答案没有什么新意。