WordPress 文章快速插入Google Map

Last Updated on 2022-09-25

剛從PIXNET搬到WordPress時,有一件事情我很不習慣,就是在寫文章的時候沒辦法直接在後台插入Google Map,最近終於找到符合我的需求,可以解決這個問題的WordPress外掛。

PIXNET文章插入Google地圖

以前在用PIXNET寫文章的時候有一個擴充功能是"文章插入 Google 地圖",可以直接在編輯文章時直接搜尋地點,並且直接插入地圖到文章。

image 59

PIXNET擴充功能插入Google Map的效果如下圖,雖然沒有店名但是有地址和大概可以看的出來在哪個位置。

image 57

WordPress文章插入Google Map

利用Google 地圖程式碼插入地圖

我換到WordPress之後,因為不熟悉所以找不到類似功能的外掛,所以前一陣子都是用"自訂html"區塊來內嵌Google Map的html程式碼。

雖然比以前在PIXNET的地圖好看多了,但用起來就是很麻煩,要另外開一個頁面Google,複製html程式碼,然後貼到自訂html區塊。

image 61

利用自訂html區塊內嵌Google Map html程式碼插入地圖的效果如下,有店名、地址、星數、評論數量,還可以規劃路線。

用Qubely插入Google Map

最近裝了一個新的外掛Qubely裡面剛好有插入Google Map的功能,真的非常方便,而且顯示的效果很好,預設的地圖的大小適中,該有的資訊都有。

使用Qubely前,在控制台>外掛>安裝外掛>搜尋Qubely,安裝後啟用。

image 65

在編輯文章時插入Qubely的Google Map區塊。

image 62

然後直接在區塊輸入要插入Google Map地圖的地點,搜尋欄位的下方可以即時預覽地圖。

image 63

Qubely的Google Map區塊在前台的顯示效果如下,基本上和插入html程式碼一樣,有店名、地址、星數、評論數和規劃路線。不過地圖放得比較大,可以看的到附近的路名和地標,比插入Google Map html程式碼更清楚。