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控制臺

訪問https://console.cloud.google.com/,登錄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地圖了。