Elementor Google Map 教學 – 網站 Google 地圖多點標註與資訊視窗顯示

Elementor Google Map

歡迎回到鵠學苑 — 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 外掛安裝與設定

第一步:進在安裝外掛中搜尋 Premium Addons for Elementor ,依序安裝及啟用。

Elementor Google Map 教學

第二步:完成安裝後在工具列左下角有可以設定的位置,點選 Setting 。

Elementor Google Map 教學

第三步:那設定裡面可以決定要顯示哪些小工具,如果說你的網站是剛建立的,這部分可以跳過,因為每一種小工具都有可能會用到,關閉小工具的用意在於不要讓 Elementor 頁面載入時耗費不必要的資源來載入用不到的小工具,以免拖慢後台運行速度,下圖筆者只開啟 Google Maps 的功能。

Elementor Google Map 教學

第四步:在 Google Maps 設定中輸入 API key ,請注意,如果沒有確實輸入信用卡綁定的 Google API key ,地圖將會有浮水印而無法正常顯示,詳細的申請方式可以參考:Google地圖無法顯示,出現浮水印? 申請 API 帳單資料流程教學

Elementor Google Map 教學

Premium Google Map 小工具教學

第一步:開啟要加入 Google 地圖的頁面,在左側 Premium Addons 中可以找到剛剛開啟的 Google Maps Widget ,直接拖拉到空白處。

Elementor Google Map 教學

首先必須決定地圖顯示的中心點,下圖中 Latitude 是緯度,Longitude 是經度,這部分要先做設定再進入下一步。

Elementor Google Map 教學

第二步:這裡說明如何在 Google 地圖上查詢經緯度,在地點上點擊滑鼠右鍵,選擇“這是哪裡”,在地圖下緣就會顯示此地點的緯度與經度。Elementor Google Map 教學

Elementor Google Map 教學

第三步:接著設置想要標注的地點,同樣輸入緯度與精度,就會在地圖上以 Google 預設圖示標示出位置。

Elementor Google Map 教學

第四步:在地點設置中,可以加入此地點的資訊視窗,分別在 Title 及 Description 輸入文字就會顯示,預設的顯示方式是點擊圖標。

Elementor Google Map 教學

第五步:在 Custom Icon 欄位中可以修改標註圖案,如下圖筆者直接從媒體庫選取圖片置換為鵠崙設計的 Logo 。

Elementor Google Map 教學

第六步:複製第一個地點 (item #1) 生成 item #2 ,重複操作 查詢座標輸入緯度、經度加入資訊視窗文字設定地點圖標 的動作。

Elementor Google Map 教學

第七步:在 Controls 中可以開啟地圖可操作功能以及設定樣式,以下介紹:

  • Height:設定地圖高度,在普遍會設置 Bnner 的頁面中,大多設置為 500 ~700 px ,這樣的高度較能完整顯示地圖內容。
  • Zoom:設定地圖縮放層級,在地點較為相近的狀況下,大部分都會設置為 15~17 。
  • Map Type Controls:衛星檢視或地圖檢視的切換。
  • Zoom Controls:放大縮小地圖的控制按鈕。
  • Street View Control:街景服務,拖拉黃色小人到指定位置就會顯示附近的街景。
  • Fullscreen Control:全螢幕放大地圖。

Elementor Google Map 教學

第八步:Info Container 是控制資訊視窗的顯示方式,下圖標示的位置如果開啟,則資訊視窗會一直都顯示,如果關閉,則可以選擇滑鼠游標靠近地點時顯示,可以參考下圖二的 Gif 所顯示的效果。

Elementor Google Map 教學

Elementor Google Map 教學

第九步:會切換到樣式中,可以更改資訊視窗裡面的文字顏色、大小、粗細等。

Elementor Google Map 教學

第十步:Map 也是相同,可以為地圖加上邊線、改變圓角、加上陰影等。

Elementor Google Map 教學

結語:

Elementor Google Map 可以說是相當好用的小工具,尤其在無法自行客製化 Google 地圖的狀態下,依舊可以快速為網站建立多點顯示的 Google 地圖,這也是鵠學苑想要推薦給大家的原因,不僅完全免費,操作也相當簡單!在後續鵠學苑也會發佈更多的 Elementor 相關教學,請各位持續關注我們喔!

今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

Elementor 相關教學文章:

網站架設知識推薦閱讀:

WordPress版本更新 – 發佈 2019 全新主題及 Gutenberg 編輯器

Google Maps API 開始收費了?解析 Google 地圖費用與規則!

免費網頁空間 架站平台比較 – WordPress,Wix,Weebly,Blogger

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

返回頂端