犬哥網站

希望這篇文章對你有幫助!

如果希望我協助「 網站建置、講座教學等 .. 」,歡迎 聯絡我
如何在 WordPress 網站嵌入 Google Map 地圖,2 種方法介紹!

如何在 WordPress 網站嵌入 Google Map 地圖,2 種方法介紹!

這篇文章,會跟大家分享如何在 WordPress 網站進行「 Google Map 嵌入地圖 」。

架設 公司品牌官網,或是有實體店面的 電商網站,可能會有需要在網站上嵌入 Google Map 地圖的需求。

而當我們在瀏覽網站時,有時也會看到某些商家用 Google Map 的方式呈現地理位置,相比用純文字描述地址,也來的更加生動一些。

其實在 WordPress 網站 嵌入 Google Map 非常的簡單,不需要用什麼專業的技術,基本上新手小白也能順利嵌入成功。

這篇文章會用簡單的方法,跟大家分享如何操作。

WordPress 網站嵌入 Google Map,完整影片教學

WordPress 網站嵌入 Google Map,完整影片教學

1. 嵌入 Google 地圖程式碼

這章節會跟大家分享,如何用嵌入程式碼的方式,在 WordPress 嵌入 Google Map 地圖。

Step1:標記商家地點

前往 Google Map,在你的商家大約位置點選地圖,點擊後會出現小地標的 Icon。

接著,會出現這個地點的經緯度,我們點擊經緯度。

Google Map 嵌入地圖 :選擇商家位置,並點選經緯度
選擇商家位置,並點選經緯度

選擇「 新增遺漏的地點 」。

選擇「 新增遺漏的地點 」
選擇「 新增遺漏的地點 」

Step2:設定商店資訊

設定商店資訊,像是商店名稱、營業類別、實際位置等 ..。

Google Map 嵌入地圖 :設定商店資訊
Google Map 嵌入地圖 :設定商店資訊

點擊展開按鈕,會看到有更多的商店資訊可以填寫,像是營業時間、聯絡方式、網站路徑等 ..。

可以的話會建議都填寫完畢,這樣對之後的商家 SEO 優化也會比較好,完成後點「 傳送 」。

Google Map 嵌入地圖 :設定商店資訊
設定商店資訊

Step3:查詢新增的地標是否被激活

接著,會需等待 Google Map 收錄你新增的地標(時間長短不一定),你也能確認 Gmail 看是否有收到相關信件,裡面也會標示目前的審核進度。

Google Map 嵌入地圖 :確認信件,地標審核狀態
確認信件,地標審核狀態

另外一個確認審核進度的方法,也可點 Google Map 左上角的更多功能 Icon。

Google Map 嵌入地圖 :點擊更多功能
點擊更多功能

前往「 你的貢獻 」。

Google Map 嵌入地圖 :點選「 你的貢獻 」
點選「 你的貢獻 」

點選「 編輯 」就會看到剛提交的地標狀態,但因為我這地標是隨意輸入的,所以如果你自己新增的地標已經審核通過,就可直接點擊它。

Google Map 嵌入地圖 :查看地標的審核進度
查看地標的審核進度

Step4:複製地圖程式碼

那這邊我就隨意點選一個地點示範,點選「 分享 > 嵌入地圖 」,然後「 複製 HTML 」。

Google Map 嵌入地圖 :複製地圖程式碼
Google Map 嵌入地圖 :複製地圖程式碼

Step5:貼入到 WordPress 頁面

前往 WordPress 頁面 > 全部頁面,這邊我示範添加到「 聯絡我們 」的頁面上,你也可以依照自己需求添加到任一頁面。更多學習,如何新增頁面

新增「 自訂 HTML 」元素,將剛複製的地圖程式碼貼入,因為預設的地圖寬度比較窄,我們也能客製化調整地圖的寬度&高度。

下面是示範寬度 100%(全寬)、高度 450 px 的顯示。

Google Map 嵌入地圖 :貼上地圖程式碼
貼上地圖程式碼

切換為「 預覽 」模式,會看到剛複製的地圖位置已經出現了,就可以將頁面發佈囉。

Google Map 嵌入地圖 :切換瀏覽模式,調整地圖寬度&高度
切換瀏覽模式,調整地圖寬度&高度

Step5:網站地圖出現啦!

然後前往網站前台,我們看一下成果吧!太棒了,Google Map 順利嵌入到 WordPress 網站裡面了。

WordPress 網站的 Google Map 順利嵌入成功啦!
WordPress 網站的 Google Map 順利嵌入成功啦!

以上就是用嵌入程式碼方式,將 Goolge Map 嵌入到網站中,這是最多人使用的一種方法,也不需要安裝額外的外掛。


2. 使用 Elementor Map 工具

WordPress 頁面編輯器 是客製化網頁設計的好幫手,能用簡單拖曳的方式就能製作頁面,而其中最知名的就是 Elementor,安裝啟用數高達 500 萬次以上。更多 Elementor 教學

Elementor 有內建 Google Map 的工具,只要輸入地標名稱,就能直接嵌入地圖到網站中,非常的方便!

如果你也剛好有使用 Elementor,那這章節將會教你用更簡單的方式處理。

首先,前往任何一個使用 Elementor 製作的頁面,這裡我同樣用「 聯絡我們 」 頁面作為示範。

選擇「 Google 地圖 」工具,直接拖曳到想放置的地方。

Google Map 嵌入地圖 :使用 Elementor 的 Google Map 工具
使用 Elementor 的 Google Map 工具

在「 位置 」欄位直接輸入你在 Google 設定的地標名稱,Elementor 就會自動抓取所在位置。

「 放大 」欄位可調整地圖內部顯示的大小,「 高度 」是指地圖的高度,都可依照自己需求設定。

調整 Elementor 的 Google Map 設定
調整 Elementor 的 Google Map 設定

如果打算將地圖用全寬的方式顯示,也能參考下面的作法。

選擇「 段 > 版面配置 」,找到「 內容寬度 」並調成「 全寬 」即可。

地圖設定為「 全寬 」顯示
地圖設定為「 全寬 」顯示

但可能還是會發現周圍有留白邊,可點擊「 欄 > 進階 」將「 邊框間距 」都設成 0,應該就可以了。

Google Map 嵌入地圖 :將邊距設為 0,預防留白邊
Google Map 嵌入地圖 :將邊距設為 0,預防留白邊

完成後記得儲存,就可前往 WordPress 前台看一下成果啦!

Google Map 嵌入地圖 :使用 Elementor 嵌入 Google Map 成功!
使用 Elementor 嵌入 Google Map 成功!

以上就是使用 Elementor 頁面編輯器,嵌入 Google Map 的方法:)


常見問題

如何在網站上嵌入 Google Map?

方法很簡單,只要在 Google Map 將地標的程式碼複製起來,並貼至 WordPress 網站中,就可以生效了。

或是有使用 WordPress 頁面編輯器,像是 Elementor 之類的,也可以用內建的工具嵌入 Google Map。

網站上嵌入 Google Map 有什麼好處呢?

主要是方便潛在訪客找尋,用地圖方式呈現,方便他們大致掌握商家的地點。

可以客製化調整 Google Map 的寬度和高度嗎?

可以的,文章內也有提到如何簡單調整地圖的寬度&高度,只要將數字依自己需求調整即可。


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,你可以在下方留言給我,我會盡力協助解答。

或是給我一些鼓勵也可以,讓我更有動力提供學習資源給大家,我會非常感謝:)

我最近也開啟了 YouTube 頻道,裡面有些影片教學,你也能配上 Blog 一起學習,應該會來的更加順手(歡迎訂閱我+開啟小鈴鐺,可收到第一手影片教學通知)。

當然,如果怕問題描述不清楚,也可以加入 WordPress 教學時光屋 – 犬哥網站 ,我同步也會在社團中幫忙解惑。

希望這些對你有所幫助,祝架站順利啦。

犬哥網站:wordpress教學社團

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

回到頂端