WordPress模板调用带API密钥的多谷歌地图：实现双不同位置地图展示

嘿，我来帮你搞定在WordPress里展示两个不同位置的谷歌地图这件事！下面是完整的实现方案，一步步来：

步骤1：修改PHP函数，输出双地图容器 #

先把你原来的lokacije()函数改成能生成两个独立地图容器的版本，每个地图分配唯一ID，方便JS定位初始化：

function lokacije(){ 
    $output = "
    <div class='google-maps-wrapper'>
        <div id='map1'></div>
        <div id='map2'></div>
    </div>
    <style>
        /* 必须给地图设置高度，否则会显示为空 */
        .google-maps-wrapper div {
            height: 400px;
            margin: 20px 0;
            width: 100%;
            border-radius: 8px;
        }
    </style>
    <script>
        function initMap() {
            // 第一个地图的位置（你的原始坐标）
            var location1 = {lat: 45.3592940, lng: 14.3495750};
            var map1 = new google.maps.Map(document.getElementById('map1'), {
                zoom: 16,
                draggable: false,
                scrollwheel: false,
                center: location1
            });
            var marker1 = new google.maps.Marker({
                position: location1,
                map: map1,
                icon: 'http://www.omniaprijevodi.hr/wp-content/your-marker-icon.png' // 补全你的标记图标完整URL
            });

            // 第二个地图的位置（替换成你需要的目标坐标）
            var location2 = {lat: 45.815011, lng: 15.981919};
            var map2 = new google.maps.Map(document.getElementById('map2'), {
                zoom: 16,
                draggable: false,
                scrollwheel: false,
                center: location2
            });
            var marker2 = new google.maps.Marker({
                position: location2,
                map: map2,
                // 可选：给第二个地图用不同标记图标
                icon: 'http://www.omniaprijevodi.hr/wp-content/second-marker-icon.png'
            });
        }
    </script>";
    
    return $output;
}
// 注册短代码，方便在文章/页面里快速调用
add_shortcode('display_two_maps', 'lokacije');

步骤2：在WordPress中引入带API密钥的谷歌地图脚本 #

打开主题的functions.php文件，添加以下代码，记得替换成你自己的谷歌地图API密钥：

function load_google_maps_api() {
    // 替换成你的谷歌地图API密钥
    $api_key = 'YOUR_PERSONAL_GOOGLE_MAPS_API_KEY';
    // 异步加载API，确保回调函数initMap能触发
    wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?key=' . $api_key . '&callback=initMap', array(), null, true);
}
add_action('wp_enqueue_scripts', 'load_google_maps_api');

步骤3：调用展示地图 #

• 如果是在WordPress文章/页面编辑器里，直接插入短代码：[display_two_maps]
• 如果是在模板文件（比如page.php、single.php）里，直接调用函数：echo lokacije();

小提醒 #

• 确保你的API密钥已经启用了Maps JavaScript API，不然地图会加载失败
• 标记图标的URL一定要补全完整路径，避免出现图标加载不出来的情况
• 可以根据需求调整地图的zoom缩放级别、draggable拖拽权限等参数

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