wordpress外贸主题Google地图添加(替换)方案

bing地图停用了，如果你的wordpress外贸网站在使用Bing地图，可以替换成Google地图。如果你原来的wordpress外贸网站没有使用地图，也可以新添加Google地图。以下为简站wordpress外贸主题"Contact us"页面新添加或替换Google地图的教程。

先申请Google地图的API

申请Google地图API的核心流程是：注册/登录Google Cloud→创建项目→启用结算→开启必要API→创建并限制API密钥→在WordPress中配置，关键在于启用结算(有$200月免费额度)与严格限制密钥，保障安全与成本可控。以下是完整分步教程：

一、前期准备

拥有一个Google账号(Gmail即可)，用于登录Google Cloud控制台。

准备网站域名(如wodepress.com)，后续用于限制API密钥访问。

准备支付方式(信用卡)，用于开通结算账户，Google提供每月$200免费额度，超出才收费。

二、申请与配置Google地图API步骤

进入Google Cloud控制台

登录Google账号，同意服务条款进入控制台。

创建新工程

点击左上角"选择项目"→"新建项目"，输入项目名称(如"WordPress外贸站地图")，点击"创建"。

等待项目创建完成，确保项目处于选中状态。

启用结算账户

点击左侧菜单"结算"，选择"关联结算账户"，按指引添加支付方式并创建结算账户。

提示：免费额度自动发放，仅当月用量超$200才扣费。

启用所需API

点击左侧"API和服务"→"库"，搜索并启用以下API(根据需求选择)：

必选：Maps JavaScript API(基础地图加载)、Geocoding API(地址解析)

常用：Places API(地点搜索/自动补全)

可选：Directions API、Distance Matrix API、Static Maps API等

每个API进入详情页后点击"启用"即可。

创建API密钥

进入"API和服务"→"凭据"，点击"创建凭据"→"API密钥"，系统自动生成密钥，复制保存备用。

限制API密钥(关键安全步骤)

点击刚生成的密钥进入编辑页，设置两项限制：

API限制：选择"限制密钥"，勾选已启用的API，避免滥用。

网站限制：选择"HTTP referrers(网站)"，添加允许的引用来源，格式为：

复制代码

wodepress.com/*
*.wodepress.com/*

输入描述(如"WordPress外贸站专用")，点击"保存"。

在wordpress外贸网站中使用Google地图

复制代码

<div id="map" style="width:100%;height:450px;"></div>
<script>
function initMap() {
  var location = {lat: -34.397, lng: 150.644};
  var map = new google.maps.Map(document.getElementById('map'), {zoom: 8, center: location});
  var marker = new google.maps.Marker({position: location, map: map});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

上面是Google地图调用的代码，在需要的位置把这段代码加上，并把坐标值(lat: -34.397, lng: 150.644)和API KEY(YOUR_API_KEY)改成自己的就可以。

简站wordpress外贸主题Google地图替换方法

先在网站的文件管理中找到"Contact us"页面对应的模板文件page-contact.php(具体路径为：wp-content/themes/主题名称/page-contact.php)，在这个文件中找到原来的地图代码（以原来是百度地图为例）如下：

复制代码

<div id="map" style="width: 100%; margin:0px;padding:0px;height: 450px;overflow:hidden;">
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=baiduak"></script>
<script type="text/javascript"> 
var map = new BMap.Map("map");
var point = new BMap.Point(<?php echo of_get_option( 'baidumap', 'no entry' ); ?>);
map.centerAndZoom(point, 15);
 
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE); 
var sContent =
"<h4 class='tt'>Hi！您好！</h4>" + 
"<p class='add'><?php bloginfo('name'); ?>欢迎您！</p>" + 
"</div>";
 
var infoWindow = new BMap.InfoWindow(sContent); 
marker.openInfoWindow(infoWindow);
marker.addEventListener("click", function(){          
   this.openInfoWindow(infoWindow);
   
   document.getElementById('imgDemo').onload = function (){
       infoWindow.redraw();
   }
});
</script>         
</div>

把这段代码整体删除，在这个位置添加上面提到的"Google地图调用的代码"，把这段代码里的坐标值和YOUR_API_KEY改成自己的就可以。以上步骤操作完成后，再到自己网站的"Contact us"页面查看，就会发现地图已经变成Google地图了。