如何在 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 網站架設流程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 3 項架站資源,可有效幫助大家處理網站問題。

資源一:犬哥數位(專業 WordPress 網頁設計公司)

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!

WordPress 網頁設計公司|犬哥數位

資源二:WP 精選模組攻略書

由於 WordPress 主題 / 外掛有非常多種,很多網友私訊我不知道安裝哪一款,才有辦法實現功能。或是已經試了很多款外掛,但始終找不到適合自己的。

對此我整理了 高達 100 多款精選主題&外掛大全(電子書),這些都是我們團隊協助客戶開發案件時,會搭配使用的。一來外掛品質優良,二來功能性也足夠強!

WordPress 模組指南書
WordPress 模組指南書

資源三:官方教學資源(含 FB 社群解答)

如果你偏愛自架網站,也歡迎持續關注 犬哥網站 Blog,我們都持續有發布新的網站架設、網路行銷教學。

或是你比較喜歡看影片學習,也可關注 YouTube 頻道,幫助你更容易進入狀況。

當然,如果你在操作過程中遇到問題,也可以加入 WordPress 架站 x SEO 教學時光屋 – 犬哥網站 ,除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

犬哥網站|交流社團
犬哥網站交流社團

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

發佈留言

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

返回頂端