Elementor 製作網站 Google 地圖多點標註與資訊視窗顯示
內容目錄
歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略，Elementor Google Map 本身在 PRO 版本中可以選擇的功能非常陽春，只能輸入地址後顯示單一位置的 Google 地圖標示，頂多修改地圖顯示的高度，如果需要更多的呈現樣式，卻是無法做到的。因此鵠學苑決定要分享在網站開發的過程中所使用的 Elementor Google 地圖 小工具，這是由另一款免費的 Elementor 外掛 – Premium Addons for Elementor （以下簡稱 PAE ） 所提供，PAE 的 Google Map 小工具支援多點設置，比如想要將分店周圍的停車場資訊標示出來時，就可以使用，另外針對地圖控制項可以自由開關，像是衛星檢視、使用者目前位置、地圖縮放等都可以做設定，而另外一些細節像是自定義地點圖標、彈出資訊視窗（ infowindow ）等也可以製作，最重要的是 PAE 的文字欄位也支援 ACF 自定義字段的顯示，讓日後資料更換的網站維護動作更加容易。接下來跟著鵠學苑的腳步，讓我們開始學習吧！
Premium Addons for Elementor 外掛下載
https://wordpress.org/support/plugin/premium-addons-for-elementor/
PAE 官方網站
https://premiumaddons.com/
Premium Addons for Elementor Google 地圖小工具教學指南
https://tw.wordpress.org/releases/
(小提醒：必須要安裝 Elementor 以及 Elementor PRO 並且啟用這兩個外掛，才能安裝 Premium Addons for Elementor )
第一步：進在安裝外掛中搜尋 Premium Addons for Elementor ，依序安裝及啟用。
第二步：完成安裝後在工具列左下角有可以設定的位置，點選 Setting 。
第三步：那設定裡面可以決定要顯示哪些小工具，如果說你的網站是剛建立的，這部分可以跳過，因為每一種小工具都有可能會用到，關閉小工具的用意在於不要讓 Elementor 頁面載入時耗費不必要的資源來載入用不到的小工具，以免拖慢後台運行速度，下圖筆者只開啟 Google Maps 的功能。
第四步：在 Google Maps 設定中輸入 API key ，請注意，如果沒有確實輸入信用卡綁定的 Google API key ，地圖將會有浮水印而無法正常顯示，詳細的申請方式可以參考：Google地圖無法顯示，出現浮水印？ 申請 API 帳單資料流程教學。
第一步：開啟要加入 Google 地圖的頁面，在左側 Premium Addons 中可以找到剛剛開啟的 Google Maps Widget ，直接拖拉到空白處。
首先必須決定地圖顯示的中心點，下圖中 Latitude 是緯度，Longitude 是經度，這部分要先做設定再進入下一步。
第二步：這裡說明如何在 Google 地圖上查詢經緯度，在地點上點擊滑鼠右鍵，選擇“這是哪裡”，在地圖下緣就會顯示此地點的緯度與經度。
第三步：接著設置想要標注的地點，同樣輸入緯度與精度，就會在地圖上以 Google 預設圖示標示出位置。
第四步：在地點設置中，可以加入此地點的資訊視窗，分別在 Title 及 Description 輸入文字就會顯示，預設的顯示方式是點擊圖標。
第五步：在 Custom Icon 欄位中可以修改標註圖案，如下圖筆者直接從媒體庫選取圖片置換為鵠崙設計的 Logo 。
第六步：複製第一個地點 (item #1) 生成 item #2 ，重複操作 查詢座標 → 輸入緯度、經度 → 加入資訊視窗文字 → 設定地點圖標 的動作。
第七步：在 Controls 中可以開啟地圖可操作功能以及設定樣式，以下介紹：
第八步：Info Container 是控制資訊視窗的顯示方式，下圖標示的位置如果開啟，則資訊視窗會一直都顯示，如果關閉，則可以選擇滑鼠游標靠近地點時顯示，可以參考下圖二的 Gif 所顯示的效果。
第九步：會切換到樣式中，可以更改資訊視窗裡面的文字顏色、大小、粗細等。
第十步：Map 也是相同，可以為地圖加上邊線、改變圓角、加上陰影等。
Elementor Google Map 可以說是相當好用的小工具，尤其在無法自行客製化 Google 地圖的狀態下，依舊可以快速為網站建立多點顯示的 Google 地圖，這也是鵠學苑想要推薦給大家的原因，不僅完全免費，操作也相當簡單！在後續鵠學苑也會發佈更多的 Elementor 相關教學，請各位持續關注我們喔！
今天的教學到這裡告一段落了，不要忘記在右側訂閱鵠學苑電子報，確保收到最新 WordPress 教學文章，如果有網頁設計相關需求，或者想了解最新網站知識，也可以到 鵠崙設計 做線上免費諮詢喔！我們下次的教學見～
WordPress版本更新 – 發佈 2019 全新主題及 Gutenberg 編輯器