下面給出一份「從零到上線」的完整流程，教你如何為網站申請并調用Google地圖(Google Maps JavaScript API)。按順序操作即可。

一、申請Google Maps API Key

注冊/登錄Google Cloud

打開Google Cloud Console(https://console.cloud.google.com/)并用Google賬號登錄。

創建項目

點擊頂部「選擇項目」→「新建項目」，輸入名稱后創建。

啟用結算(Billing)

地圖API必須綁定信用卡/借記卡，按調用量計費。首次啟用通常有200美元/月的免費額度。

啟用API

左側菜單「API和服務」→「庫」→搜索并啟用以下3個API：

Maps JavaScript API

Geocoding API(地址?經緯度互轉時會用到)

Places API(地點搜索、自動補全)

創建憑據

「API和服務」→「憑據」→「創建憑據」→「API密鑰」。生成后復制Key，后面代碼里要用。

限制Key(防刷)

點擊剛創建的Key→「設置」→把「HTTP引薦來源」填成你的網站域名，例如wodepress.com，保存。

二、在網頁里加載地圖(最簡可運行示例)

把下面代碼添加到簡站wordpress外貿主題的wp-contact.php文件中需要顯示的位置，把YOUR_API_KEY換成剛才申請的Key，瀏覽器打開即可看到地圖。

<div id="map"></div>

    <!-- 1. 加載 Maps JS API -->
    <script>
      (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{
        await (a=m.createElement("script"));e.set("libraries",[]);e.set("key",g.key);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)
      }));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
      ({key: "YOUR_API_KEY", v: "weekly"});
    </script>

    <!-- 2. 初始化地圖 -->
    <script>
      let map;
      async function initMap() {
        const { Map } = await google.maps.importLibrary("maps");
        map = new Map(document.getElementById("map"), {
          center: { lat: 39.9042, lng: 116.4074 }, // 北京
          zoom: 12,
          mapId: "DEMO_MAP_ID", // 可留空，用于高級樣式
        });
      }
      initMap();
    </script>

三、常見下一步需求

加標記(Marker)

引入marker庫后new google.maps.Marker({position,map,title})即可。

地址解析/逆解析

啟用Geocoding API后，用new google.maps.Geocoder().geocode({address:’北京市海淀區’},callback)。

地點搜索/自動補全

啟用Places API，用new google.maps.places.Autocomplete(inputDom)。

路線規劃

啟用Directions API，用new google.maps.DirectionsService().route(request,callback)。

四、上線前checklist

把Key的HTTP引薦來源改成生產域名。

監控配額：Console→「API和服務」→「配額」可設每日上限，防止異常流量。

國內用戶訪問慢，可讓頁面先加載「maps.google.cn」的腳本，再把域名統一成「maps.googleapis.com」即可。

至此，你的網站就成功接入了Google地圖。