为何Google Maps API地图无法显示？回调函数未触发排查

核心问题分析 #

你的代码存在四个关键问题导致displayMap回调无法触发、地图不显示：

1. 回调函数作用域限制

displayMap函数被包裹在jQuery(document).ready()的闭包内，属于局部函数，Google Maps API无法在全局作用域找到它，因此回调失效。

修复代码（geocode_metabox.js）：

jQuery(document).ready(function ($){
    execute_js();

    function execute_js(){
        console.log("Hola Mundo");
    }
});

// 将displayMap暴露到全局作用域
function displayMap(){
    console.log("Display Map");
    var point = { lat: -34.5956145, lng: -58.4431949 };
    var map = new google.maps.Map(document.getElementById('sf_geocode_map'),{
        zoom: 10,
        center: point
    });
}

2. Google Maps脚本加载钩子错误

你使用了wp_enqueue_scripts钩子（前台加载脚本），但元框在后台，应该用admin_enqueue_scripts钩子。

修复代码（sf_geocode_metabox.php）：

function sf_google_maps_API() {
    wp_enqueue_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=displayMap');
}
// 替换前台钩子为后台钩子
add_action('admin_enqueue_scripts', 'sf_google_maps_API');

3. 脚本依赖关系缺失

Google Maps API应该依赖你的自定义JS文件，确保先加载geocode_metabox.js，再加载Maps API，避免全局函数未定义的问题。

优化后的脚本加载代码：

function sf_add_metabox_scripts() {
    wp_enqueue_script('sf_geocode_scripts', CHILD_THEME_ASTRA_2020_URI . 'assets/js/geocode_metabox.js' );
}
add_action( 'admin_enqueue_scripts', 'sf_add_metabox_scripts' ); 

function sf_google_maps_API() {
    // 添加依赖项，确保sf_geocode_scripts先加载
    wp_enqueue_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=displayMap', array('sf_geocode_scripts'));
}
add_action('admin_enqueue_scripts', 'sf_google_maps_API');

4. 地图容器缺少高度样式

<div id="sf_geocode_map">没有设置高度，即使地图初始化成功也无法显示。

添加CSS（geocode_metabox.css）：

#sf_geocode_map {
    height: 400px;
    width: 100%;
    margin-top: 10px;
}

最终验证步骤 #

1. 替换上述修复后的代码
2. 确保Google Maps API密钥MYKEY有效且已启用Maps JavaScript API
3. 刷新后台元框页面，查看控制台是否输出Display Map，同时检查地图容器是否正常渲染

内容的提问来源于stack exchange，提问作者tukitooo1998