EP055. “新建 Campus 文章类型 + 申请 Google Maps API Key”
🔒 登录后可标记已读📌 并入公告：Note About Google Maps JavaScript API（原 EP054） Brad 在这一讲之前先发了个提醒：Google 现在要求 Google Maps JavaScript API 必须绑定信用卡/账单信息才能拿到可用的 API Key，早期做这门课时是完全免费不用绑卡的。他强调这是 Google 自己的政策变化，不是这门课的问题，每月有 $200 免费额度（以 2020 年 6 月为准，Google 随时可能改政策），如果不想绑卡可以跳过地图这部分，只做 Campus 文章类型和 Campus ↔ Program 的关联关系就好。原文没有任何代码，纯提醒。
📌 2026 现状：Google 在 2025 年 3 月又改过一次计费规则——原本每月 $200 抵扣额度已经取消，换成按 SKU 分类的免费用量：Maps JavaScript API 这类 Essentials 类别每月 10,000 次免费调用，超过后按量计费（每千次约 $2~$7）。绑 Billing 这一步跟这一讲说的一样必须做，只是免费额度的算法不同了，个人练习项目通常不会超额，但正式上线前建议去 Google Cloud 后台核实当前的价格表。
新建一个 campus（校区）自定义文章类型，思路跟前面 event/program/professor 一样：复制 event 的注册代码改一改。然后给 campus 加一个 ACF 的 Google Map 类型字段（map_location），用来在后台地图上拖拽定位、存经纬度和地址。最后去 Google Cloud 申请一个 Google Maps API Key，通过 ACF 提供的 acf/fields/google_map/api filter 把 key 注入给 ACF 的地图字段，让后台编辑页面的地图组件能正常显示（不再报错）。这一讲还没有做前台的地图展示，那是下一讲 EP056 的内容。
涉及文件
wp-content/mu-plugins/university-post-types.php（修改，新增campus文章类型注册）wp-content/themes/fictional-university-theme/functions.php（修改，文件最底部新增 Google Maps API Key 的 filter）- ACF 后台新建字段组「Map Location」（不是代码文件，纯后台操作，见下面说明）
📌 这一讲对应的代码快照文件夹（41-existing-2021/41-end）跟 Section 11 的 EP051（JS 构建工具 npm/webpack 配置）共用同一份代码包，package.json、src/index.js 里跟构建工具相关的内容不属于这一讲，那是 EP051 的东西，这里只挑跟 Google Maps Key 有关的部分。
代码实现
复制 event 文章类型那块代码，改成 campus（放在 event 前面）：
// wp-content/mu-plugins/university-post-types.php
function university_post_types() {
// 新增：Campus Post Type
register_post_type('campus', array(
'show_in_rest' => true,
'supports' => array('title', 'editor', 'excerpt'),
'rewrite' => array('slug' => 'campuses'),
'has_archive' => true,
'public' => true,
'labels' => array(
'name' => 'Campuses',
'add_new_item' => 'Add New Campus',
'edit_item' => 'Edit Campus',
'all_items' => 'All Campuses',
'singular_name' => 'Campus'
),
'menu_icon' => 'dashicons-location-alt'
));
// Event Post Type（已有，不用动）
register_post_type('event', array( ... ));
// ...program、professor 保持不变
}
add_action('init', 'university_post_types');拿到 API Key 之后，在 functions.php 最底部新增：
// wp-content/themes/fictional-university-theme/functions.php
// 新增：把 Google Maps API Key 喂给 ACF 的 Google Map 字段
function universityMapKey($api) {
$api['key'] = 'yourKeyGoesHere'; // 换成自己申请的 API Key
return $api;
}
add_filter('acf/fields/google_map/api', 'universityMapKey');ACF 后台配置（没有代码文件，纯后台操作）
- 自定义字段 → 新建字段组，命名 Map Location。
- 新增字段：字段名也叫 Map Location，字段名称（变量名）用
map_location，字段类型选 Google Map，设为必填（Required）。 - 显示规则（Location）：文章类型（Post Type）等于
campus。 - 保存/发布这个字段组。
去 Google Cloud 申请 API Key（纯操作，没有代码）
- 访问
console.developers.google.com，新建一个项目（名字随便取，例如 "WordPress theme dev"）。 - 必须先在这个项目上绑定 Billing（信用卡/账单信息），否则申请的 Key 用不了。
- 依次启用三个 API：Maps JavaScript API、Places API、Geocoding API。
- 到 Credentials（凭据）页面点 Create Credentials → API Key，复制这个 Key。
- 可以点 Restrict Key：Application restrictions 选 HTTP referrers，把本地站点域名（比如
fictional-university.local）加进去；API restrictions 只勾上面启用的三个 API。 - 可选：到每个 API 的 Quotas 页面把每日请求数调低（比如 50），避免被恶意刷新导致意外扣费。
- 把复制的 Key 填进上面
universityMapKey()里的$api['key']。
配置完刷新后台的 campus 编辑页，地图字段的报错就会消失，可以正常拖拽定位、搜索地址（地址、经纬度会存进这个字段）。
[截图：wp-admin 后台编辑某个 campus 时，ACF Map Location 字段的地图组件，可拖拽图钉定位、搜索地址的画面]
Hook / Function 速查
| 名称 | 类型 | 用途 |
|---|---|---|
register_post_type() | WP 内建 function | 复用 event 的写法注册 campus 文章类型 |
acf/fields/google_map/api | ACF filter | 让 ACF 的 Google Map 字段类型知道要用哪个 API Key |
universityMapKey($api) | 自定义 function | 挂在上面的 filter 上，往 $api['key'] 里塞进自己申请的 Key |
常见坑
- Google 现在申请 Maps JavaScript API Key 必须绑定 Billing（信用卡），不像早期免费，这是 Google 的政策变化不是配置错误。
- 没有配置 API Key 之前，后台 campus 编辑页的 Google Map 字段会直接报错，这是正常现象。
- 就算 Key 和 Billing 都配置好了，也可能要等 5~20 分钟 Google 那边才会让新 Key 生效，编辑页地图暂时还报错不代表配置错了。
延伸 / 后续讲座会用到
这一讲只做了后台（新增 Campus 文章类型 + 能在后台地图上定位两个校区），前台的交互式地图（把所有 campus 的定位点渲染成一张真正的 Google Map）留到 EP056。
Sources
Udemy：
- Become a WordPress Developer: Unlocking Power With Code — Section 12, EP054, EP055