给wordpress外贸网站申请google地图教程

下面给出一份「从零到上线」的完整流程，教你如何为网站申请并调用Google地图(Google Maps JavaScript API)。按顺序操作即可。

一、申请Google Maps API Key

打开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和服务」→「配额」可设每日上限，防止异常流量。