重點整理
Elementor 內建的 Google 地圖只能顯示單一地址。改用 Premium Addons for Elementor 的 Google Maps 小工具，可以標註多個地點（例如分店與附近停車場）、自訂圖標與資訊視窗、開關衛星檢視與縮放等控制項。使用前要在外掛設定填入已綁定帳單的 Google Maps API 金鑰。
Elementor Google Map 本身在 PRO 版本中可以選擇的功能非常陽春，只能輸入地址後顯示單一位置的 Google 地圖標示，頂多修改地圖顯示的高度，如果需要更多的呈現樣式，卻是無法做到的。因此鵠學苑決定要分享在網站開發的過程中所使用的 Elementor Google 地圖 小工具，這是由另一款免費的 Elementor 外掛 – Premium Addons for Elementor （以下簡稱 PAE ） 所提供，PAE 的 Google Map 小工具支援多點設置，比如想要將分店周圍的停車場資訊標示出來時，就可以使用，另外針對地圖控制項可以自由開關，像是衛星檢視、使用者目前位置、地圖縮放等都可以做設定，而另外一些細節像是自定義地點圖標、彈出資訊視窗（ infowindow ）等也可以製作，最重要的是 PAE 的文字欄位也支援 ACF 自定義字段的顯示，讓日後資料更換的網站維護動作更加容易。
(小提醒：必須要安裝 Elementor 以及 Elementor PRO 並且啟用這兩個外掛，才能安裝 Premium Addons for Elementor )
Premium Addons for Elementor 外掛安裝與設定
第一步：進在安裝外掛中搜尋 Premium Addons for Elementor ，依序安裝及啟用。
第二步：完成安裝後在工具列左下角有可以設定的位置，點選 Setting 。
第三步：那設定裡面可以決定要顯示哪些小工具，如果說你的網站是剛建立的，這部分可以跳過，因為每一種小工具都有可能會用到，關閉小工具的用意在於不要讓 Elementor 頁面載入時耗費不必要的資源來載入用不到的小工具，以免拖慢後台運行速度，下圖筆者只開啟 Google Maps 的功能。
第四步：在 Google Maps 設定中輸入 API key ，請注意，如果沒有確實輸入信用卡綁定的 Google API key ，地圖將會有浮水印而無法正常顯示，詳細的申請方式可以參考：Google地圖無法顯示，出現浮水印？ 申請 API 帳單資料流程教學。
Premium Google Map 小工具教學
第一步：開啟要加入 Google 地圖的頁面，在左側 Premium Addons 中可以找到剛剛開啟的 Google Maps Widget ，直接拖拉到空白處。
首先必須決定地圖顯示的中心點，下圖中 Latitude 是緯度，Longitude 是經度，這部分要先做設定再進入下一步。
第二步：這裡說明如何在 Google 地圖上查詢經緯度，在地點上點擊滑鼠右鍵，選擇“這是哪裡”，在地圖下緣就會顯示此地點的緯度與經度。
第三步：接著設置想要標注的地點，同樣輸入緯度與精度，就會在地圖上以 Google 預設圖示標示出位置。
第四步：在地點設置中，可以加入此地點的資訊視窗，分別在 Title 及 Description 輸入文字就會顯示，預設的顯示方式是點擊圖標。
第五步：在 Custom Icon 欄位中可以修改標註圖案，如下圖筆者直接從媒體庫選取圖片置換為鵠崙設計的 Logo 。
第六步：複製第一個地點（item #1）生成 item #2 ，重複操作 查詢座標 → 輸入緯度、經度 → 加入資訊視窗文字 → 設定地點圖標 的動作。
第七步：在 Controls 中可以開啟地圖可操作功能以及設定樣式，以下介紹：
- Height：設定地圖高度，在普遍會設置 Bnner 的頁面中，大多設置為 500 ～700 px ，這樣的高度較能完整顯示地圖內容。
- Zoom：設定地圖縮放層級，在地點較為相近的狀況下，大部分都會設置為 15~17 。
- Map Type Controls：衛星檢視或地圖檢視的切換。
- Zoom Controls：放大縮小地圖的控制按鈕。
- Street View Control：街景服務，拖拉黃色小人到指定位置就會顯示附近的街景。
- Fullscreen Control：全螢幕放大地圖。
第八步：Info Container 是控制資訊視窗的顯示方式，下圖標示的位置如果開啟，則資訊視窗會一直都顯示，如果關閉，則可以選擇滑鼠游標靠近地點時顯示，可以參考下圖二的 Gif 所顯示的效果。
第九步：會切換到樣式中，可以更改資訊視窗裡面的文字顏色、大小、粗細等。
第十步：Map 也是相同，可以為地圖加上邊線、改變圓角、加上陰影等。
Google Maps API 金鑰要怎麼保護？
API 金鑰會出現在網頁原始碼中，任何人都看得到，如果沒有設限制，可能被別人拿去使用並產生費用。建立金鑰後建議：
- 設定網站限制：在 Google Cloud 的憑證頁面，把應用程式限制設為「網站」，只允許自己的網域。
- 設定 API 限制：只開放地圖需要的 Maps JavaScript API。
- 設定預算警示：在帳單中設定預算通知，用量異常時會收到 Email。
實際收費方式與免費額度以 Google Maps Platform 官方說明為準。
常見問題
Elementor 的 Google 地圖可以標示多個地點嗎？
Elementor 內建的 Google 地圖小工具只能輸入一個地址、顯示單一位置。要在同一張地圖標示多個地點，例如各分店或附近停車場，可以改用 Premium Addons for Elementor 的 Google Maps 小工具，用經緯度逐一新增標記。
Elementor Google 地圖需要 API 金鑰嗎？
Elementor 內建的地圖小工具是嵌入 Google 地圖，不需要 API 金鑰。Premium Addons 的多點地圖則要呼叫 Google Maps JavaScript API，必須在外掛設定填入金鑰，且金鑰所屬的 Google Cloud 專案要綁定帳單帳戶，否則地圖會出現浮水印。
Google 地圖上的經緯度要怎麼查？
在 Google 地圖上對著地點按右鍵，選單最上方就會顯示緯度與經度，點一下即可複製。貼到小工具時，前面的數字是緯度（Latitude），後面是經度（Longitude），兩個欄位不要填反。
結語
Elementor Google Map 可以說是相當好用的小工具，尤其在無法自行客製化 Google 地圖的狀態下，依舊可以快速為網站建立多點顯示的 Google 地圖，這也是鵠學苑想要推薦給大家的原因，不僅完全免費，操作也相當簡單！在後續鵠學苑也會發佈更多的 Elementor 相關教學，請各位持續關注我們喔！