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

Elementor Google Map

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

1. Premium Addons for Elementor 外掛安裝與設定

2. Premium Google Map 小工具教學

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

分享在 facebook
Facebook
分享在 skype
Skype
分享在 pinterest
Pinterest
分享在 email
Email
鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

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

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top