WordPress中如何集成Google Map API實(shí)現(xiàn)地圖功能

來自：素雅營銷研究院

方知筆記

2025年06月06日 14:03

一、Google Map API簡(jiǎn)介

Google Map API是谷歌提供的一套應(yīng)用程序接口，允許開發(fā)者在自己的網(wǎng)站或應(yīng)用中嵌入谷歌地圖功能。通過API，您可以實(shí)現(xiàn)地圖展示、地點(diǎn)標(biāo)記、路線規(guī)劃等多種功能。對(duì)于WordPress網(wǎng)站來說，集成Google Map API可以顯著提升用戶體驗(yàn)，特別是對(duì)于需要展示地理位置的企業(yè)網(wǎng)站、旅游博客或房地產(chǎn)平臺(tái)。

二、獲取Google Map API密鑰

訪問Google Cloud Platform控制臺(tái)(https://console.cloud.google.com/)
創(chuàng)建或選擇已有項(xiàng)目
在左側(cè)菜單選擇”API和服務(wù)”→”庫”
搜索并啟用”Maps JavaScript API”、”Places API”和”Geocoding API”
在”憑證”頁面創(chuàng)建API密鑰
設(shè)置API密鑰限制(推薦限制HTTP引薦來源)

三、WordPress集成Google Map API的三種方法

方法一：使用插件實(shí)現(xiàn)

安裝并激活”WP Google Maps”或”MapPress”等專業(yè)插件
在插件設(shè)置中輸入您的Google Map API密鑰
使用插件提供的短代碼或區(qū)塊在頁面中插入地圖
自定義地圖樣式、標(biāo)記點(diǎn)和信息窗口

方法二：手動(dòng)添加代碼

將以下代碼添加到主題的functions.php文件中：

function add_google_map_script() {
wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap', array(), null, true);
}
add_action('wp_enqueue_scripts', 'add_google_map_script');

在需要顯示地圖的頁面模板中添加HTML容器：

<div id="map" style="height: 400px; width: 100%;"></div>

添加JavaScript初始化代碼：

function initMap() {
var location = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: location
});
var marker = new google.maps.Marker({
position: location,
map: map
});
}