2025年版本 Webflow 開發者 Google Maps API 設置完整指南

, ,
1

2025年 Google Maps API 發生了一些重要變化，特別是針對 Directions 和 Distance Matrix API。本文將為您提供一個最新、最全面的設置指南，幫助您在 Webflow 中成功整合 Google Maps 功能。以下是詳細的步驟說明，確保您能夠順利開始使用這項強大的地圖服務。

創建 Google Cloud 帳戶與項目

  1. 訪問 Google Cloud Platform 網站
  2. 點擊"Get Started"按鈕
  3. 登入您的 Google 帳戶或創建一個新帳戶
  4. 創建一個新項目，為其命名（例如"My Webflow Map Project"）
  5. 接受服務條款並確認項目創建

這是整個過程的基礎步驟，您需要一個 Google Cloud 帳戶來獲取和管理您的 API 密鑰。

設置帳單賬戶

  1. 在 Google Cloud Console 中，進入"Billing"部分
  2. 點擊"Link a billing account"
  3. 提供所需的客戶信息
  4. 添加付款方式（信用卡或銀行賬戶）
  5. 點擊"Submit"啟用帳單功能

請注意，自2025年起，Google 要求所有地圖 API 用戶必須啟用帳單功能，即使您可能不會超過免費使用額度。Google Maps Platform 提供每月$200的免費使用額度，之後才會根據您的使用量收費。

啟用 Google Maps JavaScript API

  1. 在您的 Google Cloud 項目中，導航至"APIs & Services" > “Library”
  2. 搜索"Maps JavaScript API"
  3. 點擊結果並選擇"Enable"
  4. 確認 API 已成功啟用

在2025年版本中，值得注意的是某些 API 已進入 Legacy 模式。自2025年3月1日起，Directions API 和 Distance Matrix API 將進入 Legacy 狀態，建議新項目改用 Routes API。

生成 API 密鑰

  1. 在"APIs & Services"部分，選擇"Credentials"
  2. 點擊"Create Credentials"並選擇"API Key"
  3. 系統會生成您的 API 密鑰，請保存好這個密鑰
  4. 出於安全考慮，點擊"Restrict Key"進行限制設置

API 密鑰限制是非常重要的安全步驟，可以防止未經授權的使用或可能的 API 密鑰盜用。

設置 API 密鑰限制

  1. 在 API 密鑰設置頁面，選擇"HTTP referrers"作為限制類型
  2. 添加您的 Webflow 網站域名（例如：*.webflow.io 和您的自定義域名）
  3. 確保選擇了正確的 API 服務（Maps JavaScript API）
  4. 儲存限制設置

正確設置 API 限制可以確保只有您的網站能夠使用該 API 密鑰，提高安全性並控制 API 使用量。

在 Webflow 中添加 Map 元素

  1. 登錄您的 Webflow 帳戶並打開相關項目
  2. 在編輯器中，點擊"Add Elements"面板
  3. 滾動到"Advanced"部分並選擇"Map"元素
  4. 將地圖元素拖放到您希望顯示地圖的位置

Webflow 提供了專門的 Map 元素，使得集成過程變得簡單直接。

配置 Webflow 中的 Google Maps 集成

  1. 在您的 Webflow 項目中，導航至"Project Settings" > “Integrations”
  2. 找到"Google Maps"部分
  3. 粘貼您之前生成的 API 密鑰
  4. 保存更改

這一步將您的 Google Maps API 密鑰與 Webflow 項目關聯起來，使地圖功能能夠正常工作。

設置地圖屬性和功能

  1. 在您的 Webflow 編輯器中，雙擊您添加的地圖元素
  2. 在 Map Settings 中，輸入您希望顯示的地址
  3. 選擇地圖類型（道路、地形、衛星或混合）
  4. 調整縮放級別和其他顯示選項
  5. 決定是否啟用"Scrollwheel Zoom"和觸控拖動功能

這些設置可以幫助您自定義地圖的外觀和行為，以最好地適應您的網站設計。

高級地圖自定義（可選）

如果您需要更高級的自定義功能，可以考慮使用 HTML 嵌入元素和自定義代碼：

function initMap() {
  const mapOptions = {
    center: { lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE },
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  const map = new google.maps.Map(document.getElementById("map"), mapOptions);
  
  // 添加標記
  const marker = new google.maps.Marker({
    position: { lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE },
    map: map,
    title: "Your Location"
  });
}

將此代碼添加到您的頁面"Before tag"部分，並確保在 HTML 嵌入元素中創建一個 ID 為"map"的容器。

發布和測試

  1. 發布您的 Webflow 網站
  2. 訪問包含地圖的頁面
  3. 確認地圖正確顯示並按預期工作
  4. 在不同設備上測試地圖的響應性

確保您的地圖能夠在各種設備上正常顯示和操作，這對用戶體驗至關重要。

監控 API 使用量和費用

  1. 定期檢查 Google Cloud Console 中的 API 使用量
  2. 設置預算提醒，以防使用量接近免費額度限制
  3. 優化 API 調用，避免不必要的請求

監控您的 API 使用情況可以幫助您控制成本，特別是當您的網站流量增長時。

2025年 Google Maps API 變更的注意事項

自2025年3月1日起，Directions API 和 Distance Matrix API 進入 Legacy 模式。對於需要路線規劃和距離計算功能的開發者，Google 推薦使用新的 Routes API。

Routes API 的優勢：

功能 描述 用途
更快的反應速度 針對現代應用做了性能優化 即時導航和交通預測
收費資訊 提供詳細收費數據 幫助用戶規劃更經濟的路線
交通狀況分析 即時和預測交通情況 更準確的行程時間估計
路線最佳化 支持多達25個途徑點 自動選擇最佳路線
多種交通模式 包括駕車、自行車、步行和機車 滿足不同出行需求

如果您的 Webflow 項目需要這些路線功能，建議直接集成 Routes API 而不是舊版 API。

結論

正確設置 Google Maps API 並將其集成到您的 Webflow 網站中，可以顯著提升用戶體驗，特別是對於需要位置信息的企業和服務網站。隨著 Google 在2025年推出的 API 變更，及時更新和適應這些變化將確保您的網站繼續提供最佳的地圖功能。

請記得定期查看 Google Maps Platform 的更新和公告，以確保您的 API 使用始終符合最新的要求和最佳實踐。透過遵循本教程中的步驟，您的 Webflow 網站將能夠無縫集成 Google Maps 功能，為您的用戶提供優質的地理位置服務。

作為專業的數位設計與開發機構，Tenten.co 能協助您實現 Webflow 網站的 Google Maps 整合，打造出實用且吸引人的互動式地圖體驗。若您需要專業協助來設置 Google Maps API 或其他 Webflow 開發需求，歡迎預約免費諮詢，我們的技術團隊將為您提供量身定制的解決方案。