如何為應用程式加入地圖：嵌入式地圖、互動地圖與分店搜尋

要為應用程式加入地圖，首先決定你需要的是靜態嵌入（一個位置加一個標記，例如「找我們的店舖」），還是互動式地圖（根據你的資料顯示多個標記、篩選、聚合，以及「附近」功能）。如果只是一個位置，嵌入式地圖最快，而且使用 Google 的 Maps Embed API 是免費的。若要互動式地圖，請使用 JavaScript 地圖函式庫，例如 Google Maps JavaScript API、Mapbox GL JS，或開放原始碼的 Leaflet 搭配圖磚供應商；把每個地點的經緯度儲存在資料庫中，並把 API 金鑰限制在你自己的網域。以下的供應商細節均取自各供應商截至 2026 年 9 月的官方文件。

你需要哪種地圖？

大多數小型商業網站只需要第一行的做法。目錄、交易平台和列表網站則需要第三及第四行的做法。

你的選擇

Google Maps Platform

Google 的入門指南說明，你必須建立一個已啟用帳單的 Cloud 專案，並啟用你想使用的 API。其按量計費價格為 Essentials SKU（包括 Dynamic Maps）提供每月 10,000 次免費事件上限，超出後 Dynamic Maps 在首個價格層級為每 1,000 次事件 7.00 美元。Maps Embed SKU 則列為不限用量且免費。Google 也提供按月訂閱的方案。最新數字請查閱 Google Maps Platform 價格。

Mapbox

Mapbox 的價格頁面列出，Mapbox GL JS 在網頁上每月有 50,000 次免費地圖載入，之後每 1,000 次為 5.00 美元。詳見 Mapbox 價格。

Leaflet 與 OpenStreetMap

Leaflet 把自己描述為開放原始碼的 JavaScript 函式庫，用於適合手機的互動式地圖，約 42 KB 的 JavaScript。它需要地圖圖磚（即地圖的影像）從某處取得。OpenStreetMap 的公開圖磚伺服器看似誘人，但圖磚使用政策要求顯示署名、禁止大量下載、不作服務保證，並警告商業服務的存取權可能被撤回。對於真正的產品，請使用可與 Leaflet 配合的商業或自行架設的圖磚來源。

API 金鑰：公開，但須加以限制

用於瀏覽器的地圖金鑰，任何打開你頁面的人都看得見。這是預期之內的，但也意味着有人可能複製你的金鑰，並在你的帳單上消耗用量。Google 的保安指引是加入網站（HTTP 參照來源）限制，列出你的網域；以及加入 API 限制，令金鑰只能用於你所使用的 API。

用於伺服器端服務的金鑰（例如為數千個地址進行地址轉座標）應使用獨立的金鑰，並保存在伺服器端的機密中，而不是放在頁面上。另外，請在供應商的主控台設定預算警示或配額，以免一時失誤變成龐大的帳單。

地址轉座標：只做一次

地圖顯示的是經緯度，而不是地址。把地址轉換為座標稱為地址轉座標（geocoding），大多數供應商按每次請求收費。高效的做法如下：

1. 儲存一項列表時，在伺服器端為其地址進行地址轉座標。
2. 把經緯度儲存到資料庫中。
3. 地圖讀取已儲存的座標，而不會在每次瀏覽頁面時進行地址轉座標。

請查閱每個供應商的條款，了解其允許你儲存地址轉座標結果的時限，各供應商的規定並不相同。

例子提示詞

單一的嵌入式地圖：

在聯絡頁面，使用 Maps Embed API 加入一個嵌入式 Google 地圖，顯示我們的地址（12 High Street, Leeds），金鑰放在 GOOGLE_MAPS_EMBED_KEY 中。在地圖下方加入「前往導航」連結。在手機上讓它佔滿整個寬度，並延遲載入。

列表的互動地圖：

把經緯度加入 listings 資料表。當列表被建立或其地址改變時，在伺服器端使用 GEOCODING_API_KEY 中的金鑰為地址進行地址轉座標，並儲存座標。在瀏覽頁面上，使用 Leaflet 顯示地圖，每個列表一個標記；標記重疊時使用聚合。點擊標記會顯示標題、價格和一個連結。地圖與清單應使用相同的篩選條件。

「附近」功能：

加入「附近」按鈕，要求訪客提供位置，然後顯示 10 公里內的列表，並按距離排序。如果訪客拒絕提供位置存取權，讓他們改為輸入城市名稱。

逐步進行

1. 從上方的表格選定地圖類型。
2. 建立供應商帳戶和專案，並只啟用你需要的 API。
3. 建立金鑰：一個限制在你的網域（包括建造期間使用的預覽網域）的瀏覽器金鑰，以及（如有需要）一個用於地址轉座標的伺服器金鑰。
4. 把金鑰儲存為機密，並要求你的 AI 生成工具使用它們；瀏覽器金鑰雖然最終會出現在頁面中，但仍須加以限制。
5. 為每個地點儲存座標到資料庫。
6. 建立地圖：標記、彈出視窗、聚合，以及合適的預設縮放級別。
7. **搭配一個清單。**單獨的地圖在手機上很難使用，對於螢幕閱讀器也不易理解。請以清單顯示相同的結果。
8. 在供應商主控台設定預算警示。
9. 在已發布的網域上發布並測試，因為參照來源限制常常會在加入正式網域之前令地圖無法顯示。

常見錯誤

• **金鑰沒有限制。**任何人都可以在自己的網站上重複使用。
• **每次瀏覽頁面都進行地址轉座標。**既慢又昂貴；應在儲存時做一次。
• **忘記在金鑰限制中加入正式網域。**預覽中運作正常，但正式環境卻是一個空白的灰色方框。
• **只有地圖、沒有清單的版面。**在小螢幕上只有標記而沒有清單，很難使用，也不便於無障礙輔助。
• **數百個標記卻沒有聚合。**難以閱讀，而且運作緩慢。
• **缺少署名。**大多數地圖和圖磚供應商都要求顯示署名，隱藏它便違反了其條款。
• **頁面一載入便要求位置存取權。**只應在用戶點擊「附近」時才詢問。

檢查清單

• 已為工作選擇正確的地圖類型
• 瀏覽器金鑰已限制在你的網域及所需的 API
• 伺服器端金鑰保存在機密中
• 座標已儲存到資料庫，且只做一次地址轉座標
• 結果同時以清單形式顯示
• 標記眾多時使用聚合
• 署名清晰可見
• 已在供應商處設定預算警示
• 已在已發布的網域及手機上測試

在 Mythex 加入地圖

Mythex 沒有內建的地圖整合功能；你需要自行提供供應商金鑰，把它加入為專案機密（或在代理顯示機密卡時貼上），然後在對話中要求加入地圖，詳見接入任何 API。座標存放在專案的資料庫中。記得把預覽及已發布的網域都加入金鑰的網站限制中，並在更改機密之後重新發布。

地圖通常與搜尋和列表一起使用：請參閱如何為應用程式加入搜尋、如何建立目錄網站，以及如何建立小型商業網站。

常見問題