wordpress 高级自定义字段 google 映射 api 键

Question

我在使用高级自定义字段插件加载 google 地图时遇到问题。我按照此处插件页面上的说明进行所有操作 https://www.advancedcustomfields.com/resources/google-map。
我在 ACF 中添加了 google-map 字段，但在页面上它应该出现的地方出现了一秒钟，然后消失并带有 "Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details." 字样（见屏幕截图）。控制台说我需要设置 Google API 键。我想我还需要根据 ACF 指令修改 .js 文件中的一些字符串，但我不知道是哪些字符串。可能有人可以提供帮助。
提前谢谢你。
screenshot

Answer 1

我已经为这个问题找到了几个不同的解决方案，但在开始解释该怎么做之前，请记住让您获得一个 google 映射 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 支持已经在官方解决方案上工作，所以，对我来说，如果 它会被插件删除，这不是问题更新.

打开这两个文件：

advanced-custom-fields/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 2

ACF 更新了 Google Map documentation

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

地图JavaScriptAPI
地理编码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 pro

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

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

在我的例子中，我必须删除并重新创建该字段，以便它正确保存。

Answer 3

解决方案可能是编辑模板中的 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 4

使用当前版本 (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。

Answer 5

在您的脚本中添加这一行..替换为您的密钥..

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

wordpress 高级自定义字段 google 映射 api 键

wordpress advanced custom fields google map api key

wordpress

google-maps

api-key

google-maps-api-3

advanced-custom-fields

前端

后端

如果免费使用 ACF

如果使用 ACF pro